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

Question

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

用户从下拉列表中选择日期后，他/她甚至可以通过添加字符来编辑日期。所以我想找到一种方法来防止这种情况。我想使该字段不可编辑。所以我使用readonly了但是，这会阻止用户单击并显示列表。那么有人可以告诉我如何使该字段不可编辑。

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

Answer 1

您可以使用以下代码。这将使文本输入字段可点击，但当用户输入任何内容时，什么都不会发生。

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

小提琴演示

---

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

您也可以将以下内容添加到您的代码中以取消剪切和粘贴事件¹。（注意：不要为 Copy 做任何事情，因为该操作不会改变文本字段的值）。

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;

可能这会有所帮助！