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

Question

我有一个透明的输入区域，当你点击它时，会出现发光的边框（预期效果），你可以编辑文本。我想让这个发光的边框在被点击时仍然显示出来，但是使里面的文本无法编辑。

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

在输入框中添加 "readonly" 或 "readonly='readonly'"，可以使其像一个不可编辑的 div 一样工作。这时，你不能双击选中整个输入区域，也不会出现闪烁的边框。如何在保留输入功能的同时禁止更改文本？

- Crizly

---

可选择是什么意思？你可以选择它吗？复制它？它在焦点上显示背景吗？ - Richard Hamilton

Answer 1

您可以在一些CSS中使用readonly属性:

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

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

- j08691

---

完美，鼠标悬停时添加了“文本”光标，而且它看起来完全一样。 - Crizly

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

- Richard Hamilton

---

如果您使用鼠标输入值（例如粘贴值），则此方法将无效。为了防止这种情况，您需要捕获更改监听器，然后重置输入字段。 - ssc-hrep3

谢谢你指出这个问题。我完全忘记了“右键单击”，因为我太习惯使用键盘快捷键了。 - Richard Hamilton