How do I make a text input non-editable?

问题

So I have a text input

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

Here is my CSS for it

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;

Is there a setting or a trick to this, I was thinking of doing a label instead but how about the styling. How do I convert them and is there a better way or is that the only way?

回答1:

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

No styling necessary.

See <input> on MDN https://developer.mozilla.org/en/docs/Web/HTML/Element/input#Attributes

回答2:

You can add the attribute readonly to the input:

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

More info: http://www.w3schools.com/tags/att_input_readonly.asp

回答3:

You can use readonly attribute, if you want your input only to be read. And you can use disabled attribute, if you want input to be shown, but totally disabled (even processing languages like PHP wont be able to read those).

回答4:

Just to complete the answers available:

An input element can be either readonly or disabled (none of them is editable, but there are a couple of differences: focus,...)

Good explanation can be found here:
What's the difference between disabled=“disabled” and readonly=“readonly” for HTML form input fields?

How to use:

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

There are also some solutions to make it through CSS or JavaScript as explained here.

回答5:

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

You could see in https://www.w3schools.com/tags/att_input_readonly.asp

The method to set "readonly":

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

to cancel "readonly"(work in jQuery):

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

回答6:

add the readonly attribute

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

or -

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

no css needed!

回答7:

you just need to add disabled at the end

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

回答8:

Add readonly:

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

If you want the value to be not submitted in a form, instead add the disabled attribute.

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

There is no way to use CSS that always works to do this.

Why? CSS can't "disable" anything. You can still turn off display or visibility and use pointer-events: none but pointer-events doesn't work on versions of IE that came out earlier than IE 11.

回答9:

if you really want to use CSS, use following property which will make field non-editable.

pointer-events: none;

来源：https://stackoverflow.com/questions/3676127/how-do-i-make-a-text-input-non-editable

标签

html

css

html-input