防止select2在打开下拉列表时自动聚焦其搜索输入框

Question

我正在寻找一种方法来防止select2的搜索框在打开下拉列表时自动获取焦点。我知道这是select2的默认行为，虽然对于桌面客户端来说这很好，但我需要在iPad上防止此行为，因为它会触发iPad的软键盘，这不是我们想要的默认行为。

我已经尝试了各种选项，但都没有成功。这里提供一个http://jsfiddle.net/KwW5n/2/，展示了我们的设置 - 我们使用一个简单的<select>元素作为select2功能的基础。

$('#source').select2();

- brckmann

Answer 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);
});

感谢这个Github评论

- Choma

---

这个解决方案似乎让Chrome出现了问题，它无法正常工作，并在控制台中显示错误：jquery.js:4220 Uncaught RangeError: Maximum call stack size exceeded。 - Loenix

Answer 2

好的，我不确定除非你直接修改select2脚本（但我可能会错过这一点）否则是否可以改变焦点。作为解决方法，您可以通过将minimumResultsForSearch属性设置为负值来隐藏搜索框。

<select id="test">
  <option>1</option>
  <option>2</option>    
</select>

然后：

$(document).ready(function() {
   $('#test').select2({
      minimumResultsForSearch: -1
   }); 
});

代码片段

- reggaemahn

---

我们正在使用select2将本地的<select>元素转换为select2下拉菜单；没有其他事情发生，因此我们的代码与http://ivaynberg.github.io/select2/#basics中的“Basic”示例完全匹配。我会准备一个包含该代码的JSFiddle，请给我一分钟。目前我想知道“聚焦其他东西”是否会阻止默认行为- select2聚焦其搜索输入。 - brckmann

已更新问题，并添加了 JSFiddle 的链接。 - brckmann

http://jsfiddle.net/KwW5n/3/ 包含您提出的代码，但是正如预期的那样，select2的搜索输入仍然会自动聚焦 - 这不是我们想要发生的。 - brckmann

Answer 3

有时候select2会“窃取”其他元素的焦点。经过一番尝试后，我最终使用了下面这个解决方案。

在YourSelect2.on('change', function(){事件处理程序的末尾添加以下代码：

setTimeout(firstInputFocus, 300);

函数 firstInputFocus() {

    $("YourSelect2").focus();

通过设置这个微小的延迟，它可以工作。我能够将焦点从下拉列表中移开。在select2的“change”事件之后，它会执行一些内部操作来防止您立即更改焦点。对我来说，插入这个微小的延迟就解决了问题。

- WebDev-SysAdmin

Answer 4

这里发布的解决方案都没有对我起作用，所以我使用了以下方法:

这将使搜索输入在打开时只读（防止移动设备上的键盘），然后当您单击输入时，它会删除readonly并打开键盘。

$('#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

---

谢谢@David B，我发现的大多数解决方案都是在下拉菜单打开后移除焦点。但对于我来说没有用，因为在Android设备上键盘仍会弹出一小段时间。但是你的解决方案没有这个问题。谢谢。 - Anzal Khan

Answer 5

虽然@Choma的回答是可以的，但它会改变select2在桌面和移动设备上的默认行为。

我必须为一个响应式网站找到一个解决方案：只在移动设备上阻止搜索输入框的自动聚焦，并保持桌面上的默认行为。

为了检测移动设备，我使用了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）

- andreivictor

Answer 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();
});

- ffx

Answer 7

我找到的唯一“解决方案”是在创建下拉菜单后立即删除.select2-input和.select2-focusser。当您不需要输入字段进行搜索时，这只适用于列表足够短的情况。

至少删除.select2-focusser可以防止选定选项时键盘弹出。

- Edwin Boersma

Answer 8

这个解决方案对我来说完美地运作了，在手机上测试过。

// prevent auto-focus on select2 search input
    $('select').on('select2:opening', function(e) {
        $('.select2-search input').prop('focus', 1);
    });

- Emmanuel David

Answer 9

也许有人需要~ 我已经尝试过这个，它有效~

$('#selectID').on('select2:opening', function (e) {
                e.preventDefault();
            });

- Andrea

---

对我来说，它导致选择框无法打开！ - Ehsan88

Answer 10

当我使用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字段本身具有subject id。当然，将选择器更改为适合您自己代码的内容。

基本上，当select2字段打开时，它会向输入添加readonly属性，从而防止移动键盘出现，然后在单击/按下搜索字段时删除它，仅允许键盘出现。

- Murray