Question

当我在移动设备上使用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

搜索文字不断聚焦。

Answer 1

你试过吗

minimumResultsForSearch = -1

问题发布：https://github.com/ivaynberg/select2/issues/1541

Answer 2

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

单词说明：打开select2时，输入只读。当输入被聚焦时，删除只读。

$(".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")
)

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

如果 iPad键盘有问题隐藏 引导模式，而点击select2输入 >，我建议你查看我的答案：Select2 doesn't work when embedded in a bootstrap modal。

祝你好运：）

Answer 7

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

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

Answer 9

此代码对我有用：

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

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

        }

    })

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

手机上的select2键盘问题

11 个答案: