Maxlength is ignored for input type = "number" in Chrome

Question

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

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

Answer 1

From MDN Documentation for <input>

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

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

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 limited range and not the actual character length value - from -9999 to 9999 will cover all 0-4- digits), or you can use regular text input and force a check in the field using the new pattern :

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

Answer 2

Maximum length will not work with <input type="number" , the best way I know is to use the oninput event to limit the maximum length. See 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 3

You can use the min and max attributes.

The following code does the same:

 <input type="number" min="-999" max="9999"/> 

Answer 4

I have two ways to do this:

First: use type="tel" , it will work as type="number" on the mobile phone and will accept maxlength:

 <input type="tel" /> 

Second: use a little JavaScript:

 <!-- maxlength="2" --> <input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" /> 

Answer 5

Here is my solution with jQuery ... you have to add maxlength to your input type = number

 $('body').on('keypress', 'input[type=number][maxlength]', function(event){ var key = event.keyCode || event.charCode; var charcodestring = String.fromCharCode(event.which); var txtVal = $(this).val(); var maxlength = $(this).attr('maxlength'); var regex = new RegExp('^[0-9]+$'); // 8 = backspace 46 = Del 13 = Enter 39 = Left 37 = right Tab = 9 if( key == 8 || key == 46 || key == 13 || key == 37 || key == 39 || key == 9 ){ return true; } // maxlength allready reached if(txtVal.length==maxlength){ return false; } // pressed key have to be a number if( !regex.test(charcodestring) ){ return false; } return true; }); 

And the handle to copy and paste:

 $('body').on('paste', 'input[type=number][maxlength]', function(event) { //catch copy and paste var ref = $(this); var regex = new RegExp('^[0-9]+$'); var maxlength = ref.attr('maxlength'); var clipboardData = event.originalEvent.clipboardData.getData('text'); var txtVal = ref.val();//current value var filteredString = ''; var combined_input = txtVal + clipboardData;//dont forget old data for (var i = 0; i < combined_input.length; i++) { if( filteredString.length < maxlength ){ if( regex.test(combined_input[i]) ){ filteredString += combined_input[i]; } } } setTimeout(function(){ ref.val('').val(filteredString) },100); }); 

I hope this helps someone.

Answer 6

You can try this also for numerical input with a length limit

 <input type="tel" maxlength="4" /> 

Answer 7

I already know the answer, but if you want your input to behave exactly like the maxlength attribute or as close as possible, use the following code:

 (function($) { methods = { /* * addMax will take the applied element and add a javascript behavior * that will set the max length */ addMax: function() { // set variables var maxlAttr = $(this).attr("maxlength"), maxAttR = $(this).attr("max"), x = 0, max = ""; // If the element has maxlength apply the code. if (typeof maxlAttr !== typeof undefined && maxlAttr !== false) { // create a max equivelant if (typeof maxlAttr !== typeof undefined && maxlAttr !== false){ while (x < maxlAttr) { max += "9"; x++; } maxAttR = max; } // Permissible Keys that can be used while the input has reached maxlength var keys = [ 8, // backspace 9, // tab 13, // enter 46, // delete 37, 39, 38, 40 // arrow keys<^>v ] // Apply changes to element $(this) .attr("max", maxAttR) //add existing max or new max .keydown(function(event) { // restrict key press on length reached unless key being used is in keys array or there is highlighted text if ($(this).val().length == maxlAttr && $.inArray(event.which, keys) == -1 && methods.isTextSelected() == false) return false; });; } }, /* * isTextSelected returns true if there is a selection on the page. * This is so that if the user selects text and then presses a number * it will behave as normal by replacing the selection with the value * of the key pressed. */ isTextSelected: function() { // set text variable text = ""; if (window.getSelection) { text = window.getSelection().toString(); } else if (document.selection && document.selection.type != "Control") { text = document.selection.createRange().text; } return (text.length > 0); } }; $.maxlengthNumber = function(){ // Get all number inputs that have maxlength methods.addMax.call($("input[type=number]")); } })($) // Apply it: $.maxlengthNumber(); 

Answer 8

In my experience, most of the problems people ask why maxlength ignored is that the user is allowed to enter more than the "allowed" number of characters.

As noted in other comments, the inputs type="number" do not have a maxlength attribute and instead have a min and max attribute.

In order for the field to limit the number of characters that can be inserted, letting the user know about it before submitting the form (the browser must determine the value> max otherwise), you will have to (at least for now) add a listener to the field.

Here is the solution I used in the past: http://codepen.io/wuori/pen/LNyYBM

Answer 9

This will allow any number from 0 to 9999, not more than letters and not special characters.

Answer 10

I once got into the same problem and found this solution regarding my needs. It might help someone.

 <input type="number" placeholder="Enter 4 Digits" max="9999" min="0" onKeyDown="if(this.value.length==4 && event.keyCode>47 && event.keyCode < 58)return false;" /> 

Happy coding :)

Answer 11

Chrome (technically, Blink) will not implement maxlength for <input type="number"> .

The HTML5 specification states that maxlength applies only to text types, url, e-mail, search, tel, and password.

Answer 12

maxlenght - input type text

 <input type="email" name="email" maxlength="50"> 

using jQuery:

 $("input").attr("maxlength", 50) 

maxlenght - input type number

Js

 function limit(element, max) { var max_chars = max; if(element.value.length > max_chars) { element.value = element.value.substr(0, max_chars); } } 

HTML

 <input type="number" name="telefono" onkeydown="limit(this, 20);" onkeyup="limit(this, 20);">