Question

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

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

我正在实施选择性作为Angular模块angular-selectize，但我检查了开发人员，问题不是特定于角度包装器。

这是我的代码：

        <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;">

Answer 1

我遇到了同样的问题，我希望用户选择一个值但不输入任何新值，当您点击iPad上的下拉列表时，键盘始终显示。我已经解决了这个问题：

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

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

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

Answer 2

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

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

它不是纯粹的<select> UI小部件等价物;它不是一个只有下拉列表的小部件。如果你想这样使用它，你需要在保持整个指令工作的同时禁用/隐藏<input>元素。

Answer 3

如果我理解正确，您希望阻止用户输入此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。}

Answer 4

这对我有用：

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

也有效：

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

选择导致键盘出现在Android上

4 个答案: