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

所以我有文字输入

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

是否有设置或技巧，我当时在考虑制作标签，但样式如何。我该如何转换它们？有没有更好的方法？还是那是唯一的方法？

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

无需样式。

<input>在MDN上查看https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

您可以将属性添加readonly到输入中：

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

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

readonly如果只想读取输入内容，则可以使用attribute。而且disabled，如果您希望显示输入但可以完全禁用，则可以使用attribute（即使像PHP这样的处理语言也无法读取）。

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

输入元素可以是只读的也可以是禁用的（它们都不是可编辑的，但是有一些区别：focus，...）

在这里可以找到很好的解释：
HTML表单输入字段的disable =“ disabled”和readonly =“ readonly”有什么区别？

如何使用：

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

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

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

添加readonly属性

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

要么 -

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

无需CSS！

您只需要在最后添加禁用

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

添加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版本。

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

pointer-events: none;