Question

当我点击textfield时，我会得到一个下拉列表，以便用户可以从列表中选择一个值。

用户从下拉列表中选择日期后，他/她甚至可以通过添加字符来编辑日期。所以我想找到一种方法来防止这种情况发生。我想让这个领域不可编辑。所以我使用了readonly，但这可以防止用户点击并显示列表。所以有人可以告诉我，我怎样才能使这个领域不可编辑。

<input id="datePiccc" type="text" class="dates" />

Answer 1

您可以使用以下代码。这将使文本输入字段可单击，但当用户键入任何内容时，不会发生任何事情。

document.getElementById('datePiccc').onkeydown = function(e){
    e.preventDefault();
}

Fiddle Demo

正如nnnnnn所指出的，onkeydown是比onkeypress更好的选择，因为它会停止删除和退格键功能。

您也可以将以下内容添加到您的代码中，以取消剪切和粘贴事件¹。（注意：没有为复制执行任何操作，因为该操作不会更改文本字段的值）。

document.getElementById('datePiccc').oncut = function(e){
    e.preventDefault();
}
document.getElementById('datePiccc').onpaste = function(e){
    e.preventDefault();
}

¹我认为这些应该适用于所有浏览器。目前在Chrome 31，Opera 15，IE10和FireFox 24中进行了测试。（注意：在IE10中，输入字段右侧显示x标记，单击该标记会清除整个字段值。找到解决方法。）

Answer 2

我假设文本字段是在javascript中设置的。如果是这样，您可以使用以下行到disable字段：

document.getElementById('datePiccc').disabled=true;

输入将保持原样，并且也可以设置选择字段中的值。

Answer 3

禁用JQuery中的输入

$("#datePiccc").attr("disabled", true);

在纯JS中

document.getElementById('datePiccc').disabled = true;

可能会有所帮助！

使文本字段不可编辑而不仅仅是只读

3 个答案: