Twitter bootstrap Bootstrap 3日期选择器传播按键事件

Twitter bootstrap Bootstrap 3日期选择器传播按键事件,twitter-bootstrap,datepicker,Twitter Bootstrap,Datepicker,某些应用程序必须具有“按下Enter键时的下一个gui控件”功能。我们使用下面的代码来注册全局处理程序,但它在Bootstrap3DatePicker上不起作用。有人建议我们可以“覆盖”默认行为吗 以下是注册按键事件全局处理程序的核心: jQuery.extend(jQuery.expr[':'], { focusable: function (el, index, selector) { return $(el).is('a, button, :input, [tabindex]'

某些应用程序必须具有“按下Enter键时的下一个gui控件”功能。我们使用下面的代码来注册全局处理程序,但它在Bootstrap3DatePicker上不起作用。有人建议我们可以“覆盖”默认行为吗

以下是注册按键事件全局处理程序的核心:

jQuery.extend(jQuery.expr[':'], {
  focusable: function (el, index, selector) {
    return $(el).is('a, button, :input, [tabindex]');
  }
});
$(document).on('keypress', 'input,select,textarea', function (e) {
  if (e.which == 13) {
    e.preventDefault();
    // Get all focusable elements on the page
    var $canfocus = $(':focusable');
    var index = $canfocus.index(document.activeElement) + 1;
    if ($canfocus.eq(index).attr('tabindex') == -1) index++;
    if (index >= $canfocus.length) index = 0;
    $canfocus.eq(index).focus();
  }
});
我们使用此DP:

jqueryjavascript库是v2.1.4

引导v3.3.5

数据采集器页面上的代码为:

<form ...>
  <div class="form-horizontal">
    <div class="form-group">
      <label class="col-md-2 control-label" for="Date">Datum</label>
      <div class="col-md-10">

        <div class="input-group date" id="datetimepicker1">
          <input type="text" id="Date" name="Date" >
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
        <script type="text/javascript">
          $(function () {
            $('#datetimepicker1').datetimepicker({ format: 'L' });
          });
        </script>

        <span class="text-danger field-validation-valid"></span>
      </div>
    </div>
  </div>
</form>

资料
$(函数(){
$('#datetimepicker1')。datetimepicker({format:'L'});
});

使用此代码,在数据采集器处于焦点的“Enter”上不会发生任何事件。

datetimepicker
中有一个
keydown
事件处理程序,它停止传播,从而停止
keypress
事件

一个选项是重载
keydown
事件并调用自定义事件,传递
其中的
,然后调用
keydown
的原始事件:-

// get original keydown event
var h = jQuery._data($('#datetimepicker1 input')[0], "events").keydown[0].handler;
// override keydown
jQuery._data($('#datetimepicker1 input')[0], "events").keydown[0].handler = function(e) {
  // create a new custom event and trigger it with 'which' passed
  var event = $.Event('dpkeydown');
  event.which = e.which;
  $(this).trigger(event);
  // call original keydown event 
  h(e);
}

// now watch for 'dpkeydown'
$(document).on('keypress dpkeydown', 'input,select,textarea', function(e) {
  if (e.which == 13) {
     .....

很好这里有没有像你写的那样的HTML结构?HTML结构中是否可能存在此问题?我们在数据采集器周围有不同的HTML结构?我将用更多的HTML更新问题HTML。我无法想象HTML结构会影响注册keypress事件全局处理程序的keypress代码在单独的文件中,我们会在头标签中加载它的脚本链接。在浏览器调试中,我们无法捕获数据采集器的事件。上面的代码在jsfiddle.net中运行良好。我们刚刚从下载了完整的页面,并在文件末尾添加了java脚本代码,我们无法检测按键事件。我注意到您在jsfiddle.net中的示例使用的是不同版本的java脚本库;为了使用jQuery.\u data()。