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

所以我有文字输入

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

是否有设置或技巧,我当时在考虑制作标签,但样式如何。我该如何转换它们?是否有更好的方法?

阳光神奇2020/03/22 20:07:07

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

pointer-events: none;
猿GO2020/03/22 20:07:07

添加readonly属性

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

要么 -

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

无需CSS!

西里Near2020/03/22 20:07:07

添加readonly

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

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

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

没有使用CSS的方法总是可以做到这一点。

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

十三2020/03/22 20:07:07

您只需要在最后添加禁用

<input type="text" value="3" class="field left" disabled>
Near米亚2020/03/22 20:07:07
<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)
小宇宙2020/03/22 20:07:07

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

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

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

Stafan2020/03/22 20:07:07

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

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

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

如何使用:

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

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

Itachi2020/03/22 20:07:07
<input type="text" value="3" class="field left" readonly>

无需样式。

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

小小2020/03/22 20:07:07

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