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

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>

无需造型。

请参阅MDN上的<input> 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

只是为了完成答案：

输入元素可以是只读或禁用（它们都不可编辑，但存在一些差异：焦点，......）

这里可以找到很好的解释：
What's the difference between disabled=“disabled” and readonly=“readonly” for HTML form input fields?

使用方法：

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

还有一些解决方案可以通过CSS或JavaScript进行解释，如here所述。

Answer 5

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

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

中看到

设置＆＃34; readonly＆＃34;：

的方法

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

取消＆＃34; readonly＆＃34;（在jQuery中工作）：

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

Answer 6

添加readonly属性

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

或 -

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

不需要css！

Answer 7

您只需在末尾添加已停用

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

Answer 8

添加readonly：

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

如果您不希望以表单形式提交值，请添加disabled属性。

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

Answer 9

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

pointer-events: none;

Answer 10

每个输入必须有只读或可编辑的字段，所以使用它