在select2的下拉菜单打开时禁用自动对焦?

最后,我设法找到了一个对我来说很好的解决方案,如下所示:

/* 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

我想我找到了解决问题的办法 select v3 v3.5.4

我们可以用这个选项 shouldFocusInput ,必须是应返回的函数 true 或 false

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

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

代码笔演示: https://codepen.io/andreivictor/pen/JmNzvb

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

所以完整的代码应该是:

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