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

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 />

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

Answer 5

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

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

设置“只读”的方法：

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

取消“readonly”（在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>

没有办法使用总能用于执行此操作的CSS。

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