Question

我的输入区域是透明的，当您点击它时，会出现（预期）发光边框，您可以编辑文本。当你点击它时，我试图让发光的边框仍然显示，但是文本内部是不可编辑的。

<input style='border:none; background:none;' value='TEXT'>

添加readonly或readonly="readonly"会使输入显示为不可编辑的div，您无法双击输入区域以全部选择并且发光边框不会显示。如何在不允许更改文本的情况下保留输入功能？

Answer 1

您可以将readonly属性与一些CSS一起使用：

input:focus {
    box-shadow: 0 0 2px 2px #3d94db;
}

<input style='border:none; background:none;' value='TEXT' readonly>

Answer 2

可能为输入字段提供默认值

用户按键时的默认协议是键入文本。我们可以使用preventDefault()覆盖它。

现在，我刚刚意识到您可以通过鼠标右键单击事件来规避这一点。因此需要另一个事件监听器contextmenu。现在，你再也不能为此作弊了。

var inputField = document.getElementById("input-field");

inputField.addEventListener("keydown", function(event) {
    event.preventDefault();
});

inputField.addEventListener("contextmenu", function(event) {
    event.preventDefault();
});

<input type="text" id="input-field" value="This value can be selected" />

使HTML输入区域只读但可选择

2 个答案: