时间戳

首页 > 解决方案 > 我们可以触发 tabkey 事件以将光标下一个元素移动到 select2

javascript - 我们可以触发 tabkey 事件以将光标下一个元素移动到 select2

问题描述

我只想触发 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>

标签： javascriptjquerytriggers

解决方案

您可以将自定义参数传递给您的虚构事件，然后侦听 tabkey 的所有输入（最好使用委托）keypress，如果事件具有特殊参数，那么e.preventDefaults()焦点不会改变。

推荐阅读