在 select2 的下拉打开时禁用自动聚焦？

Question

我尝试在

select2

内禁用输入搜索的自动焦点，特别是在移动设备上禁用键盘弹出窗口。但是，如here所述：

select2不会触发本机事件。 select2 也会 不会触发事件的非本机版本，这是较少的 一个问题，因为我们仍然可以选择添加本机事件，而无需 破坏兼容性。

所以我能做的唯一方法是尝试获取 select2 中当前处于焦点状态的每个输入框并设置失去焦点，但没有运气。

$("select").select2().on("select2-open",":input",function(){
    setTimeout(function(){
        $(":focus").blur();
    }, 50);
});

我有可能达到上述结果吗？谢谢。

Answer 1

最后，我设法找到了适合我的解决方案，如下所示：

/* Hide keyboard on select2 open event */
function hideSelect2Keyboard(e){
    $('.select2-search input, :focus,input').prop('focus',false).blur();
}

$("select").select2().on("select2-open", hideSelect2Keyboard);

$("select").select2().on("select2-close",function(){
    setTimeout(hideSelect2Keyboard, 50);
});

在平板电脑和 iOS 设备上进行了测试。在函数

hideSelect2Keyboard()

中，我搜索了每个当前焦点元素，包括可用于初始化 select2 的输入字段，设置

.prop('focus',false)

将删除焦点，从而通过链接禁用

select2-open

和

select2-close

事件上的键盘弹出窗口

.blur()

是移除元素的焦点边框。然后我附加这个函数来选择事件

open

和

close

，它工作得很好。

我希望这能帮助其他像我一样寻找这个的人。谢谢。

Answer 2

我想我已经找到了

select v3

的解决方案 - 在

v3.5.4

中进行了测试。

我们可以使用选项

shouldFocusInput

，它必须是一个应该返回

true

或

false

的函数。

因此使用以下代码初始化插件：

$(document).ready(function() {
  $('select').select2({
    shouldFocusInput: function() {
      return false;
    }
  });
});

Codepen 演示：https://codepen.io/andreivictor/pen/JmNzvb

如果您只想在移动设备上禁用自动对焦，我的方法是使用 Modernizr 库，它可以测试浏览器中是否存在触摸事件。

所以完整的代码应该是：

$(document).ready(function() {
  $('select').select2({
    shouldFocusInput: function() {
      if (Modernizr.touch) {
         return false;
      }
      return true;
    }
  });
});

Answer 3

这是 “select2 清除时禁用焦点”的顶部谷歌结果

这是Select2 4.0.0的解决方案|选择2 4.1.1

$("select").on("select2:clear", function (evt) {
  $(this).on("select2:opening.cancelOpen", function (evt) {
    evt.preventDefault();
    
    $(this).off("select2:opening.cancelOpen");
  });
});

源线程： https://github.com/select2/select2/issues/3320#issuecomment-524153140

跳转至 [kevin-brown - 2019 年 8 月 22 日]

seo tldr；

• select2 4.x 中的清除按钮导致焦点
• 清除后停止 select2 重新获得焦点
• select2 清除时禁用焦点

Answer 4

我不知道为什么，但上述解决方案对我不起作用。但这有效-

$('select').on('select2:open', function (event) {
    $('.select2-search input').prop('focus',false);
});