Html 如何使文本输入不可编辑？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3676127/
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 do I make a text input non-editable?
提问by Matt Elhotiby
So I have a text input
所以我有一个文本输入
<input type="text" value="3" class="field left">
Here is my CSS for it
这是我的 CSS
background:url("images/number-bg.png") no-repeat scroll 0 0 transparent;
border:0 none;
color:#FFFFFF;
height:17px;
margin:0 13px 0 0;
text-align:center;
width:17px;
Is there a setting or a trick to this, I was thinking of doing a label instead but how about the styling. How do I convert them and is there a better way or is that the only way?
对此是否有设置或技巧，我正在考虑做一个标签，但样式如何。我如何转换它们，有更好的方法还是唯一的方法？
回答by BoltClock
<input type="text" value="3" class="field left" readonly>
No styling necessary.
不需要造型。
See <input>on MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes
请参阅<input>MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes
回答by Stephan Muller
You can add the attribute readonlyto the input:
您可以将属性添加readonly到输入：
<input type="text" value="3"
class="field left" readonly="readonly">
More info: http://www.w3schools.com/tags/att_input_readonly.asp
回答by jolt
You can use readonlyattribute, if you want your input only to be read. And you can use disabledattribute, if you want input to be shown, but totally disabled (even processing languages like PHP wont be able to read those).
readonly如果您只想读取您的输入，您可以使用属性。并且您可以使用disabled属性，如果您想显示输入，但完全禁用（即使像 PHP 这样的处理语言也无法读取这些）。
回答by jsidera
Just to complete the answers available:
只是为了完成可用的答案：
An input element can be either readonly or disabled (none of them is editable, but there are a couple of differences: focus,...)
输入元素可以是只读的或禁用的（它们都不可编辑，但有一些区别：焦点，...）
Good explanation can be found here:
What's the difference between disabled=“disabled” and readonly=“readonly” for HTML form input fields?
可以在这里找到很好的解释：
HTML 表单输入字段的 disabled="disabled" 和 readonly="readonly" 之间有什么区别？
How to use:
如何使用：
<input type="text" value="Example" disabled />
<input type="text" value="Example" readonly />
There are also some solutions to make it through CSS or JavaScript as explained here.
也有一些解决方案，使其通过CSS或JavaScript作为解释在这里。
回答by J. Fan
<input type="text" value="3" class="field left" readonly>
You could see in https://www.w3schools.com/tags/att_input_readonly.asp
您可以在https://www.w3schools.com/tags/att_input_readonly.asp 中看到
The method to set "readonly":
设置“只读”的方法：
$("input").attr("readonly", true)
to cancel "readonly"(work in jQuery):
取消“只读”（在 jQuery 中工作）：
$("input").attr("readonly", false)
回答by Vibhaas Srivastava
add the readonly attribute
添加只读属性
<input type="text" value="3" class="field left" readonly="readonly" >
or -
或者 -
<input type="text" value="3" class="field left" readonly>
no css needed!
不需要css！
回答by zixuan
Add readonly:
添加readonly：
<input type="text" value="3" class="field left" readonly>
If you want the value to be not submitted in a form, instead add the disabledattribute.
如果您希望不在表单中提交该值，请添加该disabled属性。
<input type="text" value="3" class="field left" disabled>
There is no way to use CSS that always works to do this.
没有办法使用始终有效的 CSS 来做到这一点。
Why? CSS can't "disable" anything. You can still turn off display or visibility and use pointer-events: nonebut pointer-eventsdoesn't work on versions of IE that came out earlier than IE 11.
为什么？CSS 不能“禁用”任何东西。您仍然可以关闭显示或可见性并使用，pointer-events: none但pointer-events不适用于早于 IE 11 的 IE 版本。
回答by Michan
you just need to add disabledat the end
你只需要在最后添加禁用
<input type="text" value="3" class="field left" disabled>
回答by saadk
if you really want to use CSS, use following property which will make field non-editable.
如果您真的想使用CSS，请使用以下属性，这将使字段不可编辑。
pointer-events: none;
