Можем ли мы вызвать событие tabkey для перемещения курсора на следующий элемент в select2

Question

Я только хочу вызвать событие табуляции, а не фокусироваться на следующем элементе.Ниже приведен код, который я пробовал. Он не фокусируется после 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

$('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>

Answer 3

Вы можете использовать как

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

http://jsfiddle.net/4PqUF/