我有一个文本输入

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

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


当前回答

在某些情况下,您只是想使输入元素不可编辑或不可更改,这意味着文本游标仍然可以放在那里,游标可以四处移动,但只有文本保持不变。它不同于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">

其他回答

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

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

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

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

不需要造型。

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

<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属性。你可以使用disabled属性,如果你想显示输入,但完全禁用(即使处理语言像PHP不能读取这些)。

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

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

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

使用方法:

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

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