我有一个文本输入
<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>
不需要造型。
参见MDN上<input> https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes
其他回答
如果你想只读取你的输入，你可以使用readonly属性。你可以使用disabled属性，如果你想显示输入，但完全禁用(即使处理语言像PHP不能读取这些)。
在某些情况下，您只是想使输入元素不可编辑或不可更改，这意味着文本游标仍然可以放在那里，游标可以四处移动，但只有文本保持不变。它不同于readOnly或disabled。
主持人(jsfiddle)
document.getElementById（'input'） .addEventListener（'keydown'， （e） => { var 字段 = e.target; var oldValue = field.value; setTimeout（function（） { if（field.value ！== oldValue） { 字段值 = 旧值; } }, 1); }) <输入 id=“input”， type=“text” 值=“default” class=“field left”>
使用JQuery (jsfiddle)
$("input").keydown(function(e) {
var oldValue=$(this).val();
var field=this;
setTimeout(function () {
if(field.value !== oldValue) {
$(field).val(oldValue);
}
}, 1);
});
<input id="input", type="text" value="default" class="field left">
只是为了完成现有的答案:
输入元素可以是只读的，也可以是禁用的(它们都是不可编辑的，但有一些区别:焦点，…)
好的解释可以在这里找到: HTML表单输入字段的disabled= " disabled "和readonly= " readonly "有什么区别?
使用方法:
<input type="text" value="Example" disabled />
<input type="text" value="Example" readonly />
也有一些解决方案，通过CSS或JavaScript在这里解释。
如果你真的想使用CSS，使用下面的属性将使字段不可编辑。
pointer-events: none;
只读和禁用将工作。但如果你想发送输入值，只需使用readonly并编辑css .field left:focus{outline: none}
