如何将焦点移到select2中的下一个元素答案

【问题标题】：How to move focus on next element in select2如何将焦点移到select2中的下一个元素
【发布时间】：2016-06-30 06:37:21
【问题描述】：

当 select2 中的选择发生变化时，我试图将焦点移到下一个元素上。但我不能那样做。为什么我的注意力没有转移到下一个领域？

html代码

<form>
<select autofocus id="select2" name="entry_id">
    <option value="0">00000000</option>
    <option value="1">11111111</option>
</select>
<input type="text" name="entry_id2" class="entry2">

javascript 代码

$("#select2").select2();
$("#select2").on("change", function () {
 $(this).closet("form").find(".entry2").focus();
});

示例页面：https://jsfiddle.net/39wk54zk/

【问题讨论】：

标签： jquery-select2-4

【解决方案1】：

这可能不是 100% 的修复，但我注意到在这段代码中，您编写的是 .closet 而不是 .closest：

 $(this).closet("form").find(".entry2").focus();

我认为应该是：

 $(this).closest("form").find(".entry2").focus();

我没有测试过，但这可能是你的问题的一部分。

【讨论】：

【解决方案2】：

这是向后或向前移动焦点的完整代码。

      let cursorDirection = ''
    $(document).keydown(function (e) {
        let key = e.which || e.keyCode;
        if (e.shiftKey) {
            //does not matter if user has pressed tab key or not
            cursorDirection = 'prev';
        }
        else if (key == 9) {
            //if tab key is pressed then move next.
            cursorDirection = 'next';
        }
        else {
            cursorDirection == '';
        }
    });
    $(document).ready(function () {
        $('select').select2({
            selectOnClose: true 
        });
        $('.select2-container').focusin(function () {
            try {
                $(this).siblings('select').select2('open');
            } catch (e) {
            }
        });
        $('select').on('select2:close', function () {
            if (cursorDirection == 'next') {
                this.nextElementSibling.nextElementSibling.focus();
            }
            else if (cursorDirection == 'prev') {
                this.previousElementSibling.focus();
            }
        })
    });

【讨论】：

【解决方案3】：

用 tabbable.js 试试这个，我有同样的问题已经解决了

$('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();
    }
  });
});

【讨论】：