Question

我有一个用户应该进入城市的文本字段。这些城市是从我的数据库中选择的数据主义者的形式。但是，我不希望用户能够单击小箭头并查看所有城市的下拉列表。一旦用户开始输入，我只希望城市显示。

我环顾四周，只找到一个隐藏箭头的解决方案，但没有禁用它;即如果你点击箭头所在的位置，仍然有一个下拉列表。

无论如何完全禁用此功能？

Answer 1

您可以在input收到点击并临时删除list属性时添加活动。然后在keydown上恢复该属性。

＆＃13;

document.getElementById('myInput').addEventListener('click', function(e) {
    var input = e.target,
        list = input.getAttribute('list');
    
    if(list) {
        input.setAttribute('data-list', list);
        input.removeAttribute('list');
    }
});

document.getElementById('myInput').addEventListener('keydown', function(e) {
    var input = e.target,
        list = input.getAttribute('data-list');

    if(list) {
        input.setAttribute('list', list);
        input.removeAttribute('data-list');
    }
});

＆＃13;

<input id="myInput" type="text" list="data">
<datalist id="data">
    <option>10</option>
    <option>12</option>
    <option>13</option>
</datalist>

＆＃13;

Answer 2

使用Jquery / Javascript删除列表是一种选择。

<input type="text" onkeyup="setData()" id="test"/>

当用户开始键入内容时，会发生键入事件，您可以检查长度是否大于1。如果是，则可以将该属性附加到输入元素上。

function setData() {        
    var data = $("#test").val();
    if (data.length > 1) {
       $("#test").attr('list', 'listname');     //This will add attribute to the input
    } else {
       $("#test").removeAttr('list');         //This will remove the attribute from the input
    }
}

是否可以从datalist中禁用下拉功能？

2 个答案: