<input type="number" readonly/> works buggy
<input type="number" readonly/> When I click on it and try to enter something - it ignore input. But when I click little up or down buttons on its right side it increment/decrement value. When I query value it return CHANGED value.
Chosen solution
Bug was reported by numerous people, will be fixed in Firefox 30. See: Bug # 982189 – Readonly input type="number" can still be changed through arrows.
Read this answer in context 👍 1All Replies (5)
I'm not quite sure what you're trying to do: are you trying to display a number in an input field which cannot be edited no matter what?
Thanks for the clarification!
Modified by Epicaleb
Form have sereral inputs, selects and textarea. Some of them marked readonly. All works fine except type=number. User can change value indirectly. It is a bug isn`t it? Or may be I misunderstand something?
Hmmm...unfortunately, there seems to be no straight-out way to prevent user input to the number field; there are a couple of options, though:
CSS:
This style will hide the spinner buttons in Firefox:
input[type=number] {
-moz-appearance:textfield;
}
jQuery:
This option will change the value of the field right back to what it was before the user tried to change it.
$(document).ready(function(){
$("#numInput").click(function(){
$("#numInput").val(THE NUMBER YOU WANT);
});
});
I hope that helps!
The MDN article claims that readonly works unless the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-readonly
So it sounds as though it was not intended for the up/down buttons to change the value.
Chosen Solution
Bug was reported by numerous people, will be fixed in Firefox 30. See: Bug # 982189 – Readonly input type="number" can still be changed through arrows.