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?
Solution 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
Solution 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
Solution 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).
Solution 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.
Solution 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)