Question

我试图禁用select2内部输入搜索的自动对焦，尤其是在移动设备上以禁用键盘弹出窗口。但是，如here所述：

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

因此，我唯一的方法是尝试使select2内的每个输入框当前处于焦点状态并设置焦点，但没有运气。

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

我是否有可能实现上述目标？谢谢。

Answer 1

我认为我已经找到了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 2

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

/* 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的{1}}事件是从元素中删除焦点边框。然后，我将此函数附加到选择事件.blur()和open上，并且工作正常。

我希望这也会对其他像我一样搜索此内容的人有所帮助。谢谢。

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

2 个答案: