手机上的select2键盘问题

Posted 2023-05-07

【中文标题】手机上的select2键盘问题

【英文标题】：select2 keyboard issue on mobile

【发布时间】：2015-01-04 08:38:58

【问题描述】：

当在移动设备上使用 select2 时，我遇到了问题。 单击时，将显示虚拟键盘。我尝试使用类似的东西

$('select').select2(
  shouldFocusInput: function (instance) 
        // Attempt to detect touch devices
        var supportsTouchEvents = (('ontouchstart' in window) ||
                                   (navigator.msMaxTouchPoints > 0));

        // Only devices which support touch events should be special cased
        if (!supportsTouchEvents) 
            return true;
        

        // Never focus the input if search is disabled
        if (instance.opts.minimumResultsForSearch < 0) 
            return false;
        

        return true;
    
);

没有成功。即使我尝试简单地使用

shouldFocusInput: false

搜索文本不断获得焦点。

【问题讨论】：

如果您不允许搜索，为什么还要使用 select2？

我确实想允许搜索，我只需要取消点击时的自动对焦。

这就是 shouldFocusInput: false 的意义所在……我不知道为什么它不起作用。我也尝试更新库，但没有。

【参考方案1】：

你试过了吗

minimumResultsForSearch = -1

发帖：https://github.com/ivaynberg/select2/issues/1541

【讨论】：

它确实工作得更好......但它仍然有很多问题。它只适用于单选（在多个我仍然得到键盘），即使有一些奇怪的事情发生：当我点击选择元素并且它位于屏幕的上半部分时它工作正常，当它位于下半部分时键盘又弹出来了……好郁闷。

没关系，它可能与手机选项有关。选择框溢出时，键盘弹出。无论如何谢谢。

【参考方案2】：

在手机上试试看是否有效：

var $select2 = $('select').select2();

$select2.on('select2-open', function(e) 
    $('.select2-drop-active .select2-input').blur();
);

【讨论】：

现在下拉菜单不会在第一次点击时打开，但键盘会打开。有点与我需要的相反。哈哈

【参考方案3】：

这对我有用。我提前为咖啡稿道歉。

文字说明：打开select2时，将输入设为只读。当输入获得焦点时，移除 readonly。

$(".location-select").on("select2:open", () ->
  $(".select2-search__field").attr("readonly", true)

  $(".select2-dropdown").bind("touchstart", (e) ->
    $target = $(e.target)
    if $target.hasClass("select2-search__field")
      $target.removeAttr("readonly").focus()
  )
)

$(".location-select").on("select2:close", () ->
  $(".select2-dropdown").unbind("touchstart")
  $(".select2-search__field").removeAttr("readonly")
)

【参考方案4】：

Select2 现在支持这种行为（参见link for details）

在那个链接上你会发现：

单选：

对于单选，Select2 允许您使用 minimumResultsForSearch 配置选项隐藏搜索框。在此示例中，我们使用值 Infinity 来告诉 Select2 从不显示搜索框。

$("#js-example-basic-hide-search").select2(
    minimumResultsForSearch: Infinity
);

对于多选：

对于多选框，没有不同的搜索控件。因此，要禁用对多选框的搜索，您需要在下拉菜单打开或关闭时将 disabled 属性设置为 true：

$('#js-example-basic-hide-search-multi').select2();

$('#js-example-basic-hide-search-multi').on('select2:opening select2:closing', function( event ) 
    var $searchfield = $(this).parent().find('.select2-search__field');
    $searchfield.prop('disabled', true);
);

【参考方案5】：

$(".select2-search input").prop("readonly", true);

对我来说工作得很好。 确保在加载表格数据后使用它。

【参考方案6】：

分享这个修复可能为时已晚......但我相信它会对某人有所帮助......接受的答案会从 select2 中删除输入框。如果您只想删除移动设备中的键盘弹出窗口（输入焦点），只需将脚本复制并粘贴到页面底部即可。

<script>
 $(".select2, .select2-multiple").on('select2:open', function (e) 
     $('.select2-search input').prop('focus',false);
 )
</script>

【参考方案7】：

我之前回答过与此相关的另一个问题。

如果您对 iPad 键盘 有问题，它在 单击 select2 输入时隐藏 引导模式 >，建议你看看我的回答：Select2 doesn't work when embedded in a bootstrap modal。

祝你好运:)

【参考方案8】：

这样效果最好：

minimumResultsForSearch: Infinity

这是设置 select2 框的便捷方法。

<script>
            $(document).ready(function() 

                $('.teamsList').val('').change();
                $('.teamsList').prepend('<option></option>').select2(placeholder: 'Select or create new...', allowClear: true, width: '100%', minimumResultsForSearch: Infinity);
                $('.teamsList').prepend('<option value="0">Create new</option>');

【参考方案9】：

此代码适用于我：

$(".select2-selection--single").click(function()
  $(".select2-search__field").attr("type","number");
);

【讨论】：

虽然这段代码 sn-p 可以解决问题，但它没有解释为什么或如何回答这个问题。请include an explanation for your code，因为这确实有助于提高您的帖子质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。您可以使用edit 按钮改进此答案以获得更多选票和声誉！

【参考方案10】：

我使用了一个if语句来判断输入是否有焦点，然后使用props将其焦点变为false，似乎效果很好。

$('.yourSelect2-continer').on('select2:open', function () 

        if ( $('.select2-search input').is(':focus') ) 

            $('.select2-search input').prop('focus', false);

         else 

            $('.select2-search input').prop('focus', true);

        

    )

【参考方案11】：

你应该去掉包含 .select2-search 和 .select2-focusser 的 div。这解决了它：

    $('select').select2(
      minimumResultsForSearch: -1
    )
    .on('select2-opening', function(e) 
      $(this).siblings('.select2-container').find('.select2-search, .select2-focusser').remove()
    );