HTML maxlength attribute not working on chrome and safari?
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
maxlength ignored for input type=number in Chrome
From MDN's documentation for <input>
If the value of the type attribute is
text
,search
,password
,tel
, orurl
, 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">
why is input type=number maxlength=3 not working in Safari?
I've accomplished it with:
<input class="required" id="field" type="text" maxlength="3" pattern="([0-9]|[0-9]|[0-9])" name="cvv"/>
and then in JavaScript I prevented the letters:
$("#myField").keyup(function() {
$("#myField").val(this.value.match(/[0-9]*/));
});
maxlength ignored for input type=number in Chrome
From MDN's documentation for <input>
If the value of the type attribute is
text
,search
,password
,tel
, orurl
, 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">
Default value of maxLength input in different browsers
I don't know for sure, but I believe that if no maxlength is set on the input, the default is actually unlimited. This is then applied by the browser and is specific to the platform. The W3schools link mentions 512KB as the maximum but that was presumably a value applied by specific browsers.
References:
What is the default maximum length of html input \ text area?
Edit: just checked https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text and correctly there is no default maxlength, so Chrome and Edge are reporting that correctly.
maxlength ignored for input type=number in Chrome
From MDN's documentation for <input>
If the value of the type attribute is
text
,search
,password
,tel
, orurl
, 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 Topics
Force Youtube Embed to Start in 720P
Fixed Body Background Scrolls with The Page on iOS7
CSS Prevent Div Flex from Stretching Child
<Strong> VS. Font-Weight:Bold & <Em> VS. Font-Style:Italic
How to Get The HTML Source of a Webpage in Ruby
Select First Occurring Element After Another Element
Why Does CSS Not Support Negative Padding
HTML5 Input Box with Type="Number" Does Not Accept Comma in Chrome Browser
An Url to a Windows Shared Folder
How to Remove The Horizontal Scrollbar in a Div
Should Tables Be Avoided in HTML at Any Cost
Why Does an Anchor Tag's Href Values Need Http:// Preprended to The Url
Draw Svg on HTML5 Canvas with Support for Font Element
How to Wrap My Markdown in an HTML Div
CSS Make Div Position Fixed Inside Div with Perspective Propertie