防止 select2 在打开下拉列表时自动聚焦其搜索输入
Posted
技术标签:
【中文标题】防止 select2 在打开下拉列表时自动聚焦其搜索输入【英文标题】：Prevent select2 from autmatically focussing its search-input when dropdown is opened 【发布时间】：2013-08-02 10:26:39 【问题描述】：我正在寻找一种方法来防止在打开 select2-dropdown 时自动聚焦 select2 的搜索输入。我知道这是 select2 的预期默认行为 - 虽然这对桌面客户端来说很好，但我需要防止 iPad 触发 iPad 软件键盘的这种行为，这不是我们想要的默认行为。
我已经搜索了一个选项，但没有运气。 http://jsfiddle.net/KwW5n/2/ 反映了我们的设置 - 我们使用一个简单的元素作为我们的 select2 功能的基础：
$('#source').select2();
【问题讨论】：
【参考方案1】：这在 select2 v4 上对我有用：
// keep search input, but avoid autofocus on dropdown open
$('#research .filter').on('select2:open', function (e)
$('.select2-search input').prop('focus',false);
);
感谢this github comment
【讨论】：
这个解决方案似乎让 Chrome 疯狂，这不起作用，我在控制台中收到错误：jquery.js:4220 Uncaught RangeError: Maximum call stack size exceeded【参考方案2】：有时 select2 “窃取”其他元素的焦点。折腾了好久，我才用下面这个解决方案。
在 YourSelect2.on('change', function()
的事件处理程序的最后setTimeout(firstInputFocus, 300);
函数 firstInputFocus()
$("YourSelect2").focus();
通过设置这个轻微的延迟，它可以工作。我可以将焦点从下拉列表中移开。在 select2 的“更改”事件之后，它会在 select2 代码内部执行一些操作，从而阻止您立即更改焦点。无论如何，插入这个轻微的延迟对我来说是成功的。
【讨论】：
【参考方案3】：好的，我不确定是否可以更改焦点，除非您更改 select2 脚本本身（不过我可能错了）。作为一种解决方法，您可以通过将 minimumResultsForSearch 属性设置为负值来隐藏搜索框。
<select id="test">
<option>1</option>
<option>2</option>
</select>
然后：
$(document).ready(function()
$('#test').select2(
minimumResultsForSearch: -1
);
);
Fiddle
【讨论】：
我们正在使用 select2 将原生 用 JSFiddle 的链接更新了问题。 jsfiddle.net/KwW5n/3 包含您建议的代码，但正如预期的那样，select2 的搜索输入仍会自动聚焦 - 这是我们不希望发生的事情。【参考方案4】：这里发布的解决方案都不适合我，所以我解决了这个问题：
这将使搜索输入在打开时成为只读（阻止移动设备上的键盘），然后当您单击输入时，它会删除只读并打开键盘。
$('#myselectbox').select2(placeholder: "Select Something").on('select2:open', function(e)
$('.select2-search input').attr('readonly',true);
);
$('body').on('click', '.select2-search input', function()
$(this).attr('readonly',false);
);
【讨论】：
谢谢@David B，我发现的大多数解决方案都是基于在打开下拉菜单后移除焦点。这对我来说没用，因为在安卓设备中，键盘仍然会在几分之一秒内弹出。但你的解决方案没有这个问题。谢谢。【参考方案5】：我发现的唯一“解决方案”是在创建下拉列表后立即删除 .select2-input 和 .select2-focusser 。这仅在您不需要输入字段进行搜索时才有效，例如当列表足够短时。
仅删除 .select2-focusser 至少可以防止在选择选项时弹出键盘。
【讨论】：
【参考方案6】：如果您想禁用搜索框以及作为文本输入的自动焦点，例如防止 ios 浏览器滚动键盘，请使用以下代码：
$('select').select2();
// will remove the searchbox and focus initially
$(".select2-search, .select2-focusser").remove();
// will remove the searchbox and focus on selection/close
$('select').on('select2:closing', function (e)
$(".select2-search, .select2-focusser").remove();
);
【讨论】：
【参考方案7】：虽然@Choma's answer 没问题，但它会改变桌面和移动设备上@987654324@ 的默认行为。
我必须为响应式网站找到解决方案：防止搜索输入仅在移动设备上自动聚焦，并在桌面上保持默认行为。
为了检测移动设备，我使用了 Modernizr 库，它可以测试浏览器中是否存在触摸事件。
我们可以在Modenizr v2上使用Modernizr.touch，如果支持触摸事件，它将返回true，否则返回false。
所以我们可以像这样修改@Choma 的答案：
$('select').on('select2:open', function()
if (Modernizr.touch)
$('.select2-search__field').prop('focus', false);
);
演示：
https://codepen.io/andreivictor/full/QmKxOw/
测试日期：
桌面：IE 11、Chrome、Firefox、Opera、Safari android 4.2.2 Android 5.0.1（三星 Galaxy S4） Android 6.0.1（三星 Galaxy S7 Edge） iOS 11.2.5 (iPhone 8) iOS 10.3.2 (iPhone 6 Plus) iOS 10.3.2 (iPad Mini 3)【讨论】：
【参考方案8】：使用 Choma 的解决方案时，我在控制台中遇到了 JQuery 的“递归过多”错误。
以下内容适用于 v4：
// keep search input available, but avoid autofocus and thus mobile
// keyboard appearing when dropdown opens.
$('body').on('select2:open','#subject', function (e)
$('#modal .select2-search input').attr('readonly',true);
$('#modal .select2-search input').click(function(ev)
$('#modal .select2-search input').attr('readonly',false);
);
);
如您所知，此 select2 字段位于 id 为 modal 的模式上，而 select2 字段本身的 id 为 subject。当然，将选择器更改为适合您自己的代码的选择器。
它基本上在 select2 字段打开时向输入添加一个 readonly 属性以防止出现移动键盘，然后在单击/按下搜索字段时将其删除以允许键盘出现。
【讨论】：
【参考方案9】：以下技巧对我有用。您可以禁用 select2 元素的输入搜索字段：
$('select').on('select2:opening', function()
$('.select2-search__field').attr("autocomplete", "new-password");
);
setTimeout(function() $('.select2-search__field').attr("autocomplete", "new-password"); , 2000);
【讨论】：
【参考方案10】：也许有人需要~ 这个我试过了，效果很好~
$('#selectID').on('select2:opening', function (e)
e.preventDefault();
);
【讨论】：
对我来说，它会导致选择框无法打开！【参考方案11】：该解决方案对我来说非常有效。在手机上测试
// prevent auto-focus on select2 search input
$('select').on('select2:opening', function(e)
$('.select2-search input').prop('focus', 1);
);
【讨论】：
以上是关于防止 select2 在打开下拉列表时自动聚焦其搜索输入的主要内容，如果未能解决你的问题，请参考以下文章
使用带有标签的select2 jquery插件：true，您如何防止选择出现在已选择的下拉列表中？