Javascript 如何禁用输入类型=文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2874688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable an input type=text?
提问by kawtousse
I want to disable writing in an input field of type textusing JavaScript, if possible.
The input field is populated from a database; that is why I don't want the user to modify its value.
text如果可能，我想禁用使用 JavaScript在类型输入字段中写入。输入字段是从数据库填充的；这就是为什么我不希望用户修改它的值。
回答by hudolejev
document.getElementById('foo').disabled = true;
or
或者
document.getElementById('foo').readOnly = true;
Note that readOnlyshould be in camelCase to work correctly in Firefox (magic).
请注意，readOnly应该在驼峰式大小写中才能在 Firefox 中正常工作（魔术）。
Demo: https://jsfiddle.net/L96svw3c/-- somewhat explains the difference between disabledand readOnly.
演示：https: //jsfiddle.net/L96svw3c/——在某种程度上解释了disabled和之间的区别readOnly。
回答by Nick Craver
If you know this when the page is rendered, which it sounds like you do because the database has a value, it's better to disable it when rendered instead of JavaScript. To do that, just add the readonlyattribute (or disabled, if you want to remove it from the form submission as well) to the <input>, like this:
如果您在页面呈现时知道这一点，这听起来像您这样做，因为数据库有一个值，最好在呈现时禁用它而不是 JavaScript。为此，只需将readonly属性（或者disabled，如果您还想从表单提交中将其删除）添加到<input>，如下所示：
<input type="text" disabled="disabled" />
//or...
<input type="text" readonly="readonly" />
回答by Pointy
If the data is populated from the database, you might consider notusing an <input>tag to display it. Nevertheless, you can disable it right in the tag:
如果数据是从数据库填充的，您可能会考虑不使用<input>标签来显示它。不过，您可以直接在标签中禁用它：
<input type='text' value='${magic.database.value}' disabled>
If you need to disable it with Javascript later, you can set the "disabled" attribute:
如果您稍后需要使用 Javascript 禁用它，您可以设置“禁用”属性：
document.getElementById('theInput').disabled = true;
The reason I suggest not showing the value as an <input>is that, in my experience, it causes layout issues. If the text is long, then in an <input>the user will need to try and scroll the text, which is not something normal people would guess to do. If you just drop it into a <span>or something, you have more styling flexibility.
我建议不要将值显示为 an 的原因<input>是，根据我的经验，它会导致布局问题。如果文本很长，那么<input>用户将需要尝试滚动文本，这不是正常人会猜到的。如果你只是将它放入 a<span>或其他东西，你会有更多的造型灵活性。
回答by Chani Poz
You can also by jquery:
你也可以通过jquery：
$('#foo')[0].disabled = true;
Working example:
工作示例：
$('#foo')[0].disabled = true;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="foo" placeholder="placeholder" value="value" />回答by Roatin Marth
Get a reference to your input box however you like (eg document.getElementById('mytextbox')) and set its readonlyproperty to true:
获取您喜欢的输入框的引用（例如document.getElementById('mytextbox')）并将其readonly属性设置为true：
myInputBox.readonly = true;
Alternatively you can simply add this property inline (no JavaScript needed):
或者，您可以简单地内联添加此属性（不需要 JavaScript）：
<input type="text" value="from db" readonly="readonly" />
