按下 Tab 时如何防止 Select2 选择突出显示的选项？

Question

在 Select2 中，当您按 Tab 键时，如果您在选项突出显示时按 Tab 键，它会自动 select 一个选项。

例如，如果您 select 一个选项，然后退格将其删除，并且文本框中没有任何内容，第一个选项仍将突出显示，因此当您按 Tab 键时，它会 select它。

我希望这样人们就可以不select编辑任何东西，也不会发生这种情况。

据推测，最好的方法是改变按 Tab 键时的行为方式。（例如，从来没有select选项，或者当文本框为空时没有select选项）。

我该怎么做？

<select id="example" multiple="multiple" style="width: 300px">
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

$('#example').select2({
    placeholder: 'Select a month'
});

要测试的 JSFiddle 示例： https://jsfiddle.net/NathanFriend/rLmztr2d/

Answer 1

你可以试试修改焦点在select2输入时的tab效果：

$('#example').select2({
    placeholder: 'Select a month'
});


$('.select2-search__field').keydown((ev) => {
  if (ev.which == 9 ){
   var e = jQuery.Event("keydown");e.which = 40;//code of downarrow  
   $('.select2-search__field').trigger(e)
   //$('.select2-search__field').val(String.fromCharCode(e.which));
    return false;
  }
});

<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://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet"/>


<select id="example" multiple="multiple" style="width: 300px">
    <option value="JAN">January</option>
    <option value="FEB">February</option>
    <option value="MAR">March</option>
    <option value="APR">April</option>
    <option value="MAY">May</option>
    <option value="JUN">June</option>
    <option value="JUL">July</option>
    <option value="AUG">August</option>
    <option value="SEP">September</option>
    <option value="OCT">October</option>
    <option value="NOV">November</option>
    <option value="DEC">December</option>
</select>

Answer 2

这可以通过挂接到搜索字段上的 keydown 事件来解决，然后检查是否按下了 Tab。

从那里，您可以将 tabPressed 变量保存到 true。

然后，您挂接到 select2:selecting 事件，该事件在它要 select 一个选项时触发。从那里，我们检查是否按下了 tab 以及搜索字段是否为空字符串 - 如果是，我们只需取消事件，关闭 select2 下拉列表，然后找到下一个 input 和给它 focus()

代码如下：

<div>
  <input type="text">
</div>

<div>
  <select id="example" multiple="multiple" style="width: 300px">
      <option value="JAN">January</option>
      <option value="FEB">February</option>
      <option value="MAR">March</option>
      <option value="APR">April</option>
      <option value="MAY">May</option>
      <option value="JUN">June</option>
      <option value="JUL">July</option>
      <option value="AUG">August</option>
      <option value="SEP">September</option>
      <option value="OCT">October</option>
      <option value="NOV">November</option>
      <option value="DEC">December</option>
  </select>
</div>

<div>
  <input type="text">
</div>

$('#example').select2({
    placeholder: 'Select a month'
});

var tabPressed = false;

$('.select2-search__field').keydown((ev) => {
  if (ev.which == 9 ){
    var e = jQuery.Event("keydown");
    tabPressed = true;
  }
});

$('#example').on("select2:selecting", function(e) { 
   if(tabPressed)
   {
     tabPressed = false;
     if($(this).parent().find('.select2-search__field').val() == '')
     {
         e.preventDefault();
       $("#example").select2("close");
       $(this).parent().next().find('input').focus();
     }
   }
});

这是 jsfiddle：

https://jsfiddle.net/1e7vmwux/1/

按下 Tab 时如何防止 Select2 选择突出显示的选项？

How to prevent Select2 from selecting a highlighted option when pressing tab?

javascript

jquery-select2