如何使文本输入不可编辑？

Question

所以我有一个文本输入

<input type="text" value="3" class="field left">

这是我的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; 

有没有设置或诀窍,我正在考虑做一个标签,但造型如何.我如何转换它们并且有更好的方法还是唯一的方法？

Answer 1

<input type="text" value="3" class="field left" readonly>

没有造型需要.

请参阅<input>MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

Answer 2

您可以将该属性添加readonly到输入:

<input type="text" value="3"
       class="field left" readonly="readonly">

更多信息:http: //www.w3schools.com/tags/att_input_readonly.asp

Answer 3

readonly如果只想读取输入,可以使用属性.你可以使用disabled属性,如果你想要显示输入,但完全禁用(甚至处理语言,如PHP将无法读取它们).

Answer 4

只是为了完成可用的答案:

输入元素可以是只读的或禁用的(它们都不可编辑,但有一些区别:焦点,......)

这里可以找到很好的解释:
对于HTML表单输入字段,disabled ="disabled"和readonly ="readonly"之间的区别是什么？

如何使用:

<input type="text" value="Example" disabled /> 
<input type="text" value="Example" readonly />

也有一些解决方案,使其通过CSS或JavaScript作为解释在这里.

Answer 5

如果您确实想使用CSS，请使用以下属性，这将使字段不可编辑。

pointer-events: none;

Answer 6

添加readonly：

<input type="text" value="3" class="field left" readonly>

如果您希望不在表单中提交该值，请添加该disabled属性。

<input type="text" value="3" class="field left" disabled>

没有办法使用总是有效的 CSS 来做到这一点。

为什么？CSS 不能“禁用”任何东西。您仍然可以关闭显示或可见性并使用pointer-events: none，但pointer-events不适用于早于 IE 11 的 IE 版本。

Answer 7

<input type="text" value="3" class="field left" readonly>

您可以在https://www.w3schools.com/tags/att_input_readonly.asp 中看到

设置“只读”的方法：

$("input").attr("readonly", true)

取消“只读”（在 jQuery 中工作）：

$("input").attr("readonly", false)