12

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

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

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

11 回答 11

11

这在 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 评论

于 2015-09-25T23:12:50.857 回答
2

有时 select2 从其他元素“窃取”焦点。在搞砸了很多之后，我只是在下面使用了这个解决方案。

在 YourSelect2.on('change', function(){ 的事件处理程序的最后

setTimeout(firstInputFocus, 300);

}

函数 firstInputFocus() {

    $("YourSelect2").focus();

}

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

于 2020-07-07T18:22:19.843 回答
1

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

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

接着：

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

小提琴

于 2013-08-01T13:17:41.010 回答
1

这里发布的所有解决方案都不适合我，所以我做了这个工作：

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

$('#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);
        });
于 2020-02-03T11:32:15.067 回答
0

我发现的唯一“解决方案”是在创建下拉列表后立即删除 .select2-input 和 .select2-focusser 。这仅在您不需要输入字段进行搜索时才有效，例如当列表足够短时。

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

于 2013-11-19T08:54:37.200 回答
0

可能有人需要~这个我试过了~

$('#selectID').on('select2:opening', function (e) {
                e.preventDefault();
            });
于 2020-12-15T05:24:37.343 回答
0

尽管@Choma的回答很好，但它会改变select2桌面和移动设备上的默认行为。

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

为了检测移动设备，我使用了Modernizr库，它可以测试浏览器中是否存在触摸事件。

我们可以Modernizr.touch在Modenizr v2true上使用，如果支持触摸事件，它将返回，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
  • 安卓 4.2.2
  • 安卓 5.0.1 (三星 Galaxy S4)
  • 安卓 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)
于 2018-04-28T11:12:07.710 回答
0

该解决方案对我来说非常有效。在手机上测试

// prevent auto-focus on select2 search input
    $('select').on('select2:opening', function(e) {
        $('.select2-search input').prop('focus', 1);
    });
于 2021-09-11T19:56:01.987 回答
0

如果您想禁用搜索框以及作为文本输入的自动焦点，例如防止 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();
});
于 2018-04-16T12:46:15.077 回答
0

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

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

setTimeout(function(){ $('.select2-search__field').attr("autocomplete", "new-password"); }, 2000);
于 2020-05-01T08:58:07.387 回答
0

使用 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. 当然，将选择器更改为适合您自己的代码的内容。

它基本上readonly在 select2 字段打开时向输入添加一个属性，以防止出现移动键盘，然后在单击/按下搜索字段时将其删除，只允许键盘出现。

于 2019-10-23T01:28:05.603 回答