HTML maxlength attribute not working on chrome and safari?
Max length will not work with <input type="number"
the best way i know is to use oninput event to limit the maxlength. Please see the below code.
<input name="somename"
oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
type = "number"
maxlength = "6"
/>
The maxlength attribute does not apply to an input of type="number"
From W3 HTML5 spec concerning type="number"
The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, maxlength, multiple, pattern, size, src, and width.
Source: http://dev.w3.org/html5/spec/Overview.html#number-state-type-number (under Bookkeeping details)
In FF and IE, the input is falling back to be a text input and therefore, maxlength applies to the input. Once FF and IE implement type="number", they should also implement it in a way where maxlength does not apply.
Use the max attribute for inputs of type="number"
. It will specify the highest possible number that you may insert
<input type="number" max="999" />
if you add both a max and a min value you can specify the range of allowed values:
<input type="number" min="1" max="999" />
See this example
EDIT
If, for user experience, you would prefer the user not to be able to enter more than a certain number, use Javascript/jQuery, as seen in this example