Question

我正在寻找一种方法来阻止select2的搜索输入在打开select2-dropdown时自动聚焦。我知道这是select2的预期默认行为 - 虽然这对于桌面客户端来说很好，但我需要阻止iPad触发iPad软件键盘的这种行为，这不是我们想要的默认设置。

我搜索了一个没有运气的选项。 http://jsfiddle.net/KwW5n/2/反映了我们的设置 - 我们使用简单元素作为select2功能的基础：

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

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

信用额转到this github comment

Answer 2

好的，我不确定是否可以更改焦点，除非您更改select2脚本本身（虽然我可能会错误）。作为一种解决方法，您可以通过将minimumResultsForSearch属性设置为负值来隐藏搜索框。

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

然后：

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

Fiddle

Answer 3

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

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

Answer 4

如果要禁用搜索框并将自动对焦作为文本输入，例如阻止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();
});

Answer 5

虽然@Choma's answer很好，但它会改变桌面设备和移动设备上的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）

Answer 6

使用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属性，以防止出现移动键盘，然后在单击/按下搜索字段以允许该键盘仅出现时，将其删除。 / p>

Answer 7

这里发布的所有解决方案都不适合我，因此我进行了以下工作：

这将使搜索输入在打开时处于只读状态（防止在移动设备上使用键盘），然后在单击输入时将其删除并打开键盘。

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

Answer 8

以下技巧对我有用。您可以禁用 select2 元素的输入搜索字段：

$('select').on('select2:opening', function() {
  $('.select2-search__field').attr("autocomplete", "new-password");
});

setTimeout(function(){ $('.select2-search__field').attr("autocomplete", "new-password"); }, 2000);

Answer 9

有时select2从其他元素“窃取”焦点。经过一番混乱之后，我在下面使用了这种解决方案。

YourSelect2.on（'change'，function（）{

setTimeout(firstInputFocus, 300);

}

function firstInputFocus（）{

    $("YourSelect2").focus();

}

通过设置此轻微延迟，它可以工作。我可以将重点从下拉列表中移开。在select2发生“更改”事件之后，它在select2代码内部执行了某些操作，从而阻止您立即更改焦点。插入这种轻微的延迟无论如何对我来说都是成功的秘诀。

Answer 10

也许有人需要〜我已经尝试过了，而且行得通〜

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

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

10 个答案:

演示：

经过测试：