Chrome/HTML5: Input type number not respecting max attribute? Chrome/HTML5: Input type number not respecting max attribute? google-chrome google-chrome

Chrome/HTML5: Input type number not respecting max attribute?


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


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