Question

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?

Answer 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
​