HTML maxlength attribute not working on chrome and safari?

Question

<input type="number" maxlength="5" class="search-form-input" name="techforge_apartmentbundle_searchformtype[radius]" id="techforge_apartmentbundle_searchformtype_radius"> 

This is my HTML, taken with firebug (on chrome).

I am allowed to write as much as characters as I want in the form field - in Chrome and Safari.

When on Firefox or IE10, the limit is fine.

I haven't found this issue around on the net.

Note: type="number" - not text.

Anyone saw this issue before?

Answer 1

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"       />

Answer 2

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