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

Posted 2023-05-07

【中文标题】在select2的下拉打开时禁用自动对焦？

【英文标题】：Disable auto focus on drop-down open of select2?

【发布时间】：2019-03-16 04:56:45

【问题描述】：

我试图禁用 select2 内的输入搜索的自动焦点，尤其是在移动设备上禁用键盘弹出。但是，正如here 所记录的那样：

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

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

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

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

【问题讨论】：

复制：***.com/questions/17995057/….

@andreivictor，那里的答案并不能解决我的问题，目标版本是 v4，而我正在使用 select2 v3，谢谢

【参考方案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，它工作得很好。

我希望这会帮助其他像我一样搜索这个的人。谢谢。

【参考方案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;
    
  );
);

【讨论】：

我已经测试了你的答案，但它仍然不起作用，我不知道为什么 shouldFocusInput:-1 不像它记录的那样起作用。最后，我找到了答案中的解决方案。 +1 非常感谢您的帮助。

我已经在 android 设备上测试了我的答案，它运行良好。在 iOS 上，下拉菜单打开时输入不会聚焦。但是，在手动聚焦后，即使在下拉菜单关闭后仍保持聚焦。

也许也需要在关闭事件上做某事。

我现在的问题是我在 iphone 上的 select2 无法正常工作，单击时无法打开，而是双击或三次单击，我不知道为什么它在控制台中没有显示任何内容。我想就 SO 提出另一个新问题，但我无法重现问题示例代码以发布可悲的问题..

您的 select2 因您为禁用自动对焦 (hideSelect2Keyboard) 而进行的破解而无法正常工作？

【参考方案3】：

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

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