禁用输入文本访问，但保持启用元素

Question

我想做这样的事情

该文本框无法访问，但已启用

Answer 1

您可以使用<input value="some value" readonly="readonly"/>属性。

input

或者您可以将事件监听器附加到keypress的{​​{1}}，keydown，drop和dragover event上，并防止默认操作。您还需要通过返回false来禁用复制，剪切和粘贴。您可能要阻止contextmenu事件，以防止右键单击输入。

<input id="testInput" value="some value" oncopy="return false" oncut="return false" onpaste="return false"/>
<script>
document.getElementById("testInput").addEventListener("keypress", function(event){
  event.preventDefault();
});
document.getElementById("testInput").addEventListener("keydown", 
function(event){
 event.preventDefault();
});
document.getElementById("testInput").addEventListener("dragover", 
function(event){
 event.preventDefault();
});
document.getElementById("testInput").addEventListener("drop", 
function(event){
 event.preventDefault();
});
document.getElementById("testInput").addEventListener("contextmenu", 
function(event){
 event.preventDefault();
});
</script>

使用jQuery：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="testInput" value="some value" oncopy="return false" oncut="return false" onpaste="return false"/>
 <script>
$('#testInput').on("keypress keydown dragover drop contextmenu",function(e){
    return false;
});
</script>

Answer 2

那不是文本框。 Google看起来像文本框并通过JavaScript绑定数据。您还可以通过创建一个类似框的文本框并使用innerHTML将数据绑定到该文本框来做同样的事情。