maxlength ignored for input type="number" in Chrome

html google-chrome
Prajila V P picture Prajila V P · Aug 29, 2013 · Viewed 422.4k times · Source

The maxlength attribute is not working with <input type="number">. This happens only in Chrome.

<input type="number" class="test_css"  maxlength="4"  id="flight_number" name="number"/>

Answer

Andr&#233; Dion picture André Dion · Aug 29, 2013

From MDN's documentation for <input>

If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in Unicode code points) that the user can enter; for other control types, it is ignored.

So maxlength is ignored on <input type="number"> by design.

Depending on your needs, you can use the min and max attributes as inon suggested in his/her answer (NB: this will only define a constrained range, not the actual character length of the value, though -9999 to 9999 will cover all 0-4 digit numbers), or you can use a regular text input and enforce validation on the field with the new pattern attribute:

<input type="text" pattern="\d*" maxlength="4">

Related questions

Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More
Disabling Chrome Autofill

I have been running into issues with the chrome autofill behavior on several forms. The fields in the form all have very common and accurate names, such as "email", "name", or "password", and they also have autocomplete="off" set. The …

Read More
How do I load an HTML page in a <div> using JavaScript?

I want home.html to load in <div id="content">. <div id="topBar"> <a href ="#" onclick="load_home()"> HOME </a> </div> <div id ="content"> </div> <…

Read More