Chrome/HTML5: Input type number not respecting max attribute?
Solution 1
It does work but you only see an error message (tooltip) if you put a submit button and a form into your code:
<form action="#" method="get">
<input type="number" max="99" />
<input type="submit" value="Submit!" />
</form>
jsFiddle
Solution 2
It's an old question, but I didn't find any relevant answers for this question anywhere. this behaviour is still around in chrome (version 61).
I have found a little trick that can be used in some situation.
it's relevant for those who use data-binding libraries like aurelia
, angular
etc.. I tested only on aurelia - but that should work also for others.
the trick relies on the fact that input of type range
enforce the min
/max
constraints.
we simply create another input (of type range
) that is bounded to the same value as the regular input, and we hide it via css
.
when the user inputs something that is greater than the max
value, it will snap back to the max
value.
here's a demo in aurelia: https://gist.run/?id=86fc278d3837718be4691acd5625aaad
Related videos on Youtube
FtDRbwLXw6
Updated on September 16, 2022Comments
-
FtDRbwLXw6 over 1 year
I have the following markup:
<input type="number" max="99" />
In Google Chrome (and possibly other webkit browsers), this will restrict the spinner's up arrow from going over 99, but it does not prevent the user from typing a number higher than 99. Even onblur, the invalid value is not removed/replaced or even a warning given that the value is invalid.
Am I misinterpreting how it's supposed to work, or is this a bug? I am using the latest version of Chrome (19 at the time of writing).
Edit:
To clarify, I want to know why a number greater than the specified max is allowed to be input in the first place. I realize that it gives a tooltip on form submission telling you that it's invalid, but it seems like inconsistent behavior that the spinner will not allow you to go above the max, yet you can simply type a number above the max at any time to circumvent it.
If this is desired behavior for some reason, why is that? And is there a better option to enforcing the input range without resorting to JS?
-
Wesley Murch almost 12 yearsWorks fine for me, I get the error message "Value must be less than or equal to 99.". Can we see your actual code please?
-
j08691 almost 12 yearsChrome and Opera all throw a warning when I try to submit a form that has a number outside the range: jsfiddle.net/j08691/Uv3EA
-
FtDRbwLXw6 almost 12 yearsWhy would this only show on form submission? And more importantly, why is it allowed in the first place? It restricts the spinner so you can't use that to input a higher value - why not manual input as well? And I can't use maxlength, or pattern to restrict it either, as these aren't applicable to number type inputs. I'm stuck writing a JS kludge...
-
int32_t about 11 yearsIn general, restricting keyboard input for arbitrary range is impossible. Suppose that <input type=number min=10 max=99>, and a browser can't reject '1' though it is out of the range.
-
FtDRbwLXw6 about 11 years@int32_t: The browser could reject "1". It would just have to do so onblur, just like it does if you type "a" instead. If it can tell that a value is a valid number, then I see no reason it couldn't also enforce the range...
-
-
FtDRbwLXw6 almost 12 yearsThank you, but that only shows an error message. I'm more concerned with why it's allowing a value to be input that is greater than the max in the first place. The spinner control doesn't let you go above the max, so why does it let you type a number greater? Seems like an oversight or bug to me.
-
FtDRbwLXw6 over 11 yearsApparently the powers that be disagree with my classifying this as a bug.
-
Vix over 8 yearsThis is totally a bug, please restate their oversight to them :c