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

我有一个文本输入

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

有什么设定或技巧吗，我想做一个标签，但是样式如何。我如何转换它们，有没有更好的方法或者这是唯一的方法?

735383 次浏览
小开
最佳答案 
<input type="text" value="3" class="field left" readonly>

不需要造型。

参见MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes上的<input>

小开

你可以在输入中添加属性readonly:

<input type="text" value="3"
class="field left" readonly="readonly">
< p >更多信息: http://www.w3schools.com/tags/att_input_readonly.asp < / p >
小开

如果你只想读取你的输入，你可以使用readonly属性。你可以使用disabled属性，如果你想显示输入，但完全禁用(即使是处理语言像PHP不能读取这些)。

小开

只是为了完成现有的答案:

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

好的解释可以在这里找到:
HTML表单输入字段的disabled= " disabled "和readonly= " readonly "有什么区别? < / p >

使用方法:

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

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

小开

你只需要在结尾添加禁用

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

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

设置“readonly”的方法:

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

取消“readonly”(在jQuery工作):

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

添加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不适用于ie11之前的IE版本。

小开

如果你真的想使用CSS，使用下列属性，它将使字段不可编辑。

pointer-events: none;
小开

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


提交答案