selectize 导致键盘出现在 Android 上答案

【问题标题】：selectize causes keyboard to appear on Androidselectize 导致键盘出现在 Android 上
【发布时间】：2015-02-14 00:12:22
【问题描述】：

在 Android 上，当触摸选择器时，会出现键盘输入。我怀疑这是因为生成的输入是 type="text"。

如何防止这种情况发生？如果用户从下拉列表中进行选择，则键盘出现是没有意义的。

我正在将 selectize 实现为 Angular 模块 angular-selectize，但我与开发人员核对过，问题并非特定于 Angular 包装器。

这是我的代码：

        <selectize  ng-model="filters.min_bedrooms" 
                    options="[
                            {title:'0', id:0},
                            {title:'1', id:1},
                            {title:'2', id:2},
                            ]">
        </selectize>

生成此标记：

<input type="text" autocomplete="off" tabindex="" style="width: 4px; opacity: 0; position: absolute; left: -10000px;">

【问题讨论】：

问题/期望的效果是？
问题已更新。为什么会发生这种情况，我该如何预防？
如果我理解正确，你想阻止用户在这个字段中输入？ .. 那么当selectize.js 的主要目标是text 和select 的组合时，使用selectize.js 有什么意义呢？如果我理解错了，请纠正我。
你理解的没错。但是 selectize 也可以进行正常的选择。根据文档，这个用例似乎得到了明确的支持......例如，有一个选项可以关闭创建功能。
这样的事情会有帮助吗？...jsfiddle.net/gmolop/3m57zru4

标签： javascript android angularjs selectize.js

【解决方案1】：

我遇到了同样的问题，我希望用户选择一个值但不输入任何新值，并且当您在 iPad 上点击下拉菜单时，键盘总是会显示。我已经解决了这个问题：

$('#myDropDownId').selectize({
    create: true,
    sortField: 'date'
});
$(".selectize-input input").attr('readonly','readonly');

基本上发生的情况是，当您单击/点击下拉菜单时，输入会获得焦点，这就是显示键盘的内容。通过将 readonly 设置为 false，输入不再获得焦点。

我已经在 iPad Mini 2 的 Safari 和 Chrome 上对此进行了测试。

【讨论】：

I personally used .prop('readonly', true) instead of .attr()
如果您不希望用户输入新值，为什么要使用create: true？

【解决方案2】：

这对我有用：

$(".selectize-input input").attr('readonly','readonly');

同样有效：

$(".selectize-input input").prop('readonly','readonly');

【讨论】：

只是添加，在 Angular 8 中，在 ngAfterViewInit 中调用上面的 jquery

【解决方案3】：

引用http://brianreavis.github.io/selectize.js/:

Selectize 是文本框和<select> 框的混合体。

它不是纯粹的<select> UI 小部件等价物；它不是仅下拉小部件。如果您想这样使用它，您需要禁用/隐藏<input> 元素，同时保持整个指令正常工作。

【讨论】：

您能详细说明您的建议吗？或者也许提到它是如何做到的？

【解决方案4】：

如果我理解正确，您想阻止用户在此 text 字段中输入...
^{（ergo，没有键盘焦点，但仍然可以选择下拉菜单之一选项）}

所以，正如您所说，这正是您想要的，据我所知，使用默认选项无法做到这一点，我想到这样做会禁用输入字段 ^{(readonly) 在focus event 上，并在失去焦点时再次将其转回 (blur event)。

这样，用户就可以在第一个标签之后选择另一个标签。}

看看这个例子……

var tags = [{
    id: '1',
    value: 'first'
}, {
    id: '2',
    value: 'second'
}, {
    id: '3',
    value: 'third'
}, ];

// initialize the selectize control

var $select = jQuery('#test').selectize({
    create: true,
    closeAfterSelect: true,
    options: tags,
    valueField: 'id',
    labelField: 'value'
});
var selectize = $select[0].selectize;

selectize.on('focus', function () {
    jQuery('.readonly').find('input').attr('readonly', true);
});

selectize.on('change', function () {
    selectize.blur();
});

selectize.on('blur', function () {
    jQuery('.readonly').find('input').attr('readonly', false);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.0/js/standalone/selectize.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.0/css/selectize.css" rel="stylesheet"/>

<label>test
    <input class="readonly" name="test" id="test" />
</label>

这是一种方法，但我认为这可能就足够了，具体取决于您的需求。
^{（或者至少，为您指明正确的方向）}

^{JSFiddle file 以防嵌入 sn-p 无法按预期工作。}

【讨论】：