Question

我只想触发tabkey事件，而不关注下一个元素。下面是我尝试过的代码 select2之后没有聚焦。那就是为什么我试图调用tabkey事件。

$('select').select2({
  placeholder: 'Select a month'
});

jQuery.extend(jQuery.expr[':'], {
  focusable: function(el, index, selector) {
    return $(el).is('a, button, :input, [tabindex]');
  }
});
$(document).on('keydown', ':focusable', function(e) {
  if (e.which == 13 && this.tagName.toLowerCase() != "textarea") {
    e.preventDefault();
    $(this).trigger({
      "type": 'keypress',
      which: 9
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" type="text/css"> 
<form>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
  <input type="text" class="form-control">
  <input type="text" class="form-control">
  <input type="text" class="form-control">
  
  <select >
    <option value="JAN">January</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

<select >
    <option value="JAN">January</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>
</form>

Answer 1

您可以将自定义参数传递给您的虚假事件，然后侦听所有输入（最好使用委派）以使用制表符keypress，如果该事件具有特殊参数，则e.preventDefaults()因此应集中注意不会改变。

Answer 2

您可以使用like

$('a').on( 'keyup', function( e ) {
if( e.which == 9 ) {
    console.log( e.target.href );
}});

http://jsfiddle.net/4PqUF/

Answer 3

$('select').select2({
  placeholder: 'Select a month'
});
$(function() {
  $(document).off('keydown ,select2:close', '.form-control,.select2-search__field')
  jQuery.extend(jQuery.expr[':'], {
    focusable: function(el, index, selector) {
      return $(el).is('a, button, :input, [tabindex]');
    }
  });
  $(document).on('keydown ,select2:close', '.form-control,.select2-search__field', function(e) {

    if (e.which == 13) {
      e.preventDefault();
      jQuery.tabNext();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>
<script src="https://rawgit.com/marklagendijk/jQuery.tabbable/master/jquery.tabbable.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet" type="text/css">
<form>
  <input type="text" class="form-control">
  <select>
    <option value="JAN">January</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
  </select>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
  <input type="text" class="form-control">
  <input type="text" class="form-control">
  <select>
    <option value="JAN">January</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
  </select>
</form>

我们可以触发Tabkey事件将光标下一个元素移动到select2吗？

3 个答案: