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

Posted 2021-04-27

我想在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/

答案

这可能不是100％修复，但我注意到在这段代码中，你已经写了.closet而不是.closest：

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

我认为它应该是：

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

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

另一答案

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

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

另一答案

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

以上是关于如何将焦点转移到select2中的下一个元素的主要内容，如果未能解决你的问题，请参考以下文章

按下 Enter 时将焦点转移到下一个字段

如何在不将焦点转移到另一个窗口的情况下显示 MFC 对话框

无法将焦点移动到 tvOS 中的下一个 UICollectionViewCell

如何在颤动中将焦点转移到另一个文本表单字段

背水一战 Windows 10 (76) - 控件（控件基类）: Control - 基础知识, 焦点相关, 运行时获取 ControlTemplate 和 DataTemplate 中的元素(代码片

iCarousel - 如何将焦点转移到左侧