453

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

36 Answers 36

508

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">
17
  • 23
    Also note that type="number" is a new type from the HTML 5 specification. If the browser you're testing in doesn't recognize type="number" it will treat it as type="text" which does respect the maxlength attribute. This may explain the behaviour you're seeing. Commented Aug 29, 2013 at 12:31
  • 20
    @fooquency, you are not right here, as you actually can't restrict physical length of "keyboard input" into type=number input by setting max attribute. This attribute only restricts number chosen by input's spinner.
    – Kamilius
    Commented Feb 19, 2015 at 7:44
  • 7
    what is \d* here ? Commented Feb 29, 2016 at 10:04
  • 6
    pattern="\d*" does not work in IE11 or Firefox 56. jsfiddle.net/yyvrz84v
    – Reado
    Commented Oct 20, 2017 at 8:21
  • 14
    Using regex and pattern is a incredibly creative. But in mobile, no different Android or iOS, it's a text input so it cause a bad UX.
    – AmerllicA
    Commented Jul 21, 2018 at 8:17
398

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"
 />
12
  • @Guedes version works for me in all tested devices setting type to "number". However I don't fully understand the second part of the expression ||0/1
    – Barleby
    Commented Nov 24, 2016 at 9:11
  • 93
    @Barleby. Just oninput="this.value=this.value.slice(0,this.maxLength)" should work Commented Nov 24, 2016 at 11:11
  • 3
    @WashingtonGuedes’s code above worked for me on <input type="number"> stackoverflow.com/questions/18510845/… Commented Mar 1, 2017 at 18:20
  • 1
    Beware that leading zeros are not displayed with this approach!
    – Ali Celebi
    Commented Nov 11, 2019 at 8:28
  • 4
    Technically, the maxlength attribute for number type is invalid HTML5, so it would be possible the .maxLength property will be dropped from Javascript. I think it's would better to use a data attribute: <input type="number" data-maxlength="6" oninput="this.value=this.value.slice(0,this.dataset.maxlength)" />
    – Tim
    Commented Dec 27, 2019 at 20:25
121

Many guys posted onKeyDown() event which is not working at all i.e. you can not delete once you reach the limit. So instead of onKeyDown() use onKeyPress() and it works perfectly fine.

Below is working code:

User will not be allowed to enter more than 4 digits
<br>
<input type="number" pattern="/^-?\d+\.?\d*$/" onKeyPress="if(this.value.length==4) return false;" />

13
  • 4
    this is very helpful, a shorter and much better than any other answers here while keeping the html5 number input type Commented Sep 30, 2018 at 13:50
  • 4
    I tried, after entering 4 digits, the textbox, simply gets frozen with no room for any updates, neither delete nor backspace keys works, nothing works, how to edit any digits, please mention.
    – Abbas
    Commented Feb 23, 2019 at 9:02
  • 2
    I was able to enter in ur snippet (1.2.3.4.5.5.6.76.7)
    – Alaa'
    Commented May 15, 2019 at 12:24
  • 2
    This should be the accepted answer. Very clever way to keep number field. Just be sure to add a min/max attribute as the spin buttons can still go above the 4 digits if they are used Commented Sep 25, 2019 at 14:10
  • 4
    Not works when you type 9999 and press the up button on input. Commented Oct 7, 2019 at 11:47
61

I have two ways for you do that

First: Use type="tel", it'll work like type="number" in mobile, and accept maxlength:

<input type="tel" />

Second: Use a little bit of JavaScript:

<!-- maxlength="2" -->
<input type="tel" onKeyDown="if(this.value.length==2 && event.keyCode!=8) return false;" />
8
  • 5
    your second answer isn't very good: if you reached 2 chars, you cannot delete any number.
    – vtni
    Commented Nov 17, 2014 at 18:36
  • Yes, I also noticed a Number input doesn't return value.length, anyway, I edited it including Backspace keycode Commented Nov 19, 2014 at 17:40
  • 2
    the array keys and delete (forward) button should be also include.
    – vtni
    Commented Nov 20, 2014 at 19:12
  • This is nice one . and this only working for me..upvoted Commented Jan 15, 2016 at 8:47
  • 1
    Great answer, tnx. However, I don't get the reason to use 'tel' instead of 'number' in this case. Moreover you can replace your condition of "event.keyCode!=8" with "event.keyCode>47 && event.keyCode < 58" in a case of natural numebrs to disable the user only from entering digits.
    – Dudi
    Commented Apr 27, 2017 at 21:36
30

You can use the min and max attributes.

The following code do the same:

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

10
  • 3
    I'd say this should be the correct answer here. Chrome at least then resizes the box sensibly based on the min/max parameters.
    – fooquency
    Commented Feb 11, 2014 at 14:35
  • 133
    This doesn't work if you want to add length restriction though, while you won't be able to exceed the number 9999 the user can manually type in a number that exceeds that length.
    – Philll_t
    Commented Mar 19, 2015 at 19:07
  • 15
    How does this got a 37 upvote !!! Commented Dec 1, 2021 at 18:07
  • 1
    This code is not working for the angular manual input. Commented Apr 3, 2022 at 8:09
  • 1
    Not works on edge! Commented May 25, 2022 at 0:48
26

This works in Android as well

Change your input type to text and use "oninput" event to call function:

<input type="text" oninput="numberOnly(this.id);" maxlength="4" id="flight_number" name="number"/>

Now use Javascript Regex to filter user input and limit it to numbers only:

function numberOnly(id) {
    // Get element by id which passed as parameter within HTML element event
    var element = document.getElementById(id);
    // This removes any other character but numbers as entered by user
    element.value = element.value.replace(/[^0-9]/gi, "");
}

Demo: https://codepen.io/aslami/pen/GdPvRY

4
  • 1
    best "numbers only" answer i've found. Others using evt.keycode seem to fail on my android
    – deebs
    Commented Oct 1, 2018 at 13:51
  • 1
    One very minor mod, change "this.id" to "this", numberOnly(id) to numberOnly(element), then you don't need the first line of numberOnly and it works without an id
    – tony
    Commented Aug 20, 2019 at 8:28
  • This is the simple way i found. This is my React code : <input ref={AreaRef} type="text" onInput={(e)=>{AreaRef.current.value = e.target.value.replace(/[^0-9]/gi, "")}} />
    – MustafaT
    Commented Nov 30, 2021 at 12:37
  • oninput="this.value = this.value.replace(/[^0-9]/gi, '')" works fine if it's a one-off.
    – jstafford
    Commented Feb 21, 2022 at 0:18
25

For React users,

Just replace 10 with your max length requirement

 <input type="number" onInput={(e) => e.target.value = e.target.value.slice(0, 10)}/>
1
  • 1
    Thanks! You can also use it in HTML like this: onInput="this.value = this.value.slice(0, 10)" Commented Nov 29, 2021 at 15:33
15

how to limit input type max length

<input name="somename"
    oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
    type = "number"
    maxlength = "6"
 />
10

You can try this as well for numeric input with length restriction

<input type="tel" maxlength="4" />
2
  • 11
    in some browsers (specifically mobile), the tel input will be automatically validated as such and in some weird cases leading 0s will be changed to 1s.
    – Philll_t
    Commented Mar 19, 2015 at 19:09
  • Another issue with this dirty solution imo is the browser's autocomplete being triggered. If you do specify tel as an input type (I wouldn't) add an autocomplete="off" tag
    – DeZeA
    Commented Apr 15, 2021 at 7:58
10

I once got into the same problem and found this solution with respect to my needs. It may help Some one.

<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 :)

10

try use tel :

 maxlength="5" type="tel"
3
  • This should be the correct answer — Tested on multiple devices and browsers.
    – Crashtor
    Commented May 1, 2021 at 0:47
  • 1
    Works, but remove the ability to increase/decrease value using arrow keys
    – aldrien.h
    Commented May 11, 2021 at 8:56
  • 3
    but type tel still allows alphanumeric. Type Number demands to accept only numbers [0-9]. Tel cannot be a replacement to Number Commented Jul 30, 2021 at 7:48
8

I wrote a small and clean workaround. Using this function will make it work, as it should

  const inputHandler = (e) => {
    const { value, maxLength } = e.target;
    if (String(value).length >= maxLength) {
      e.preventDefault();
      return;
    }
  };

For example, it can be used in React like this:

<input
  type="number"
  maxlength="4"
  onKeyPress={inputHandler}
/>
1
  • One thing to note about this solution is that, when the input is of maximum length, selecting all and pressing any key will not replace the input; you can only press backspace. The return is also redundant, assuming that there's no other code after the if statement. Commented Feb 8, 2022 at 0:30
8

The below code will allow the user to:

  1. Enter digits only in the 0-999 range.
  2. This also restricts the user not to enter more than 3 characters.
  3. When the user enters more than 3 characters then it will clear the textbox.
<input type="number" name="test_name" min="0" max="999" oninput="validity.valid||(value='');"> 
7

Input type text and oninput event with regex to accept only numbers worked for me.

<input type="text" maxlength="4" oninput="this.value=this.value.replace(/[^0-9]/g,'');" id="myId"/>
1
  • This is the best answer, it does not pass maxLength nor a static length in the javascript code.
    – user3408531
    Commented Oct 25, 2022 at 13:41
6

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

The HTML5 specification says that maxlength is only applicable to the types text, url, e-mail, search, tel, and password.

1
  • doesn't add anything useful to what hasn't been mentioned earlier
    – candidJ
    Commented Nov 17, 2016 at 10:20
6
<input type="number" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" onKeyDown="if(this.value.length==10 && event.keyCode!=8) return false;">

DEMO - JSFIDDLE

6

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){
        event.preventDefault();
        return false;
    }
    // pressed key have to be a number
    if( !regex.test(charcodestring) ){
        event.preventDefault();
        return false;
    }
    return true;
});

And handle 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 it helps somebody.

2
  • I had the same idea (though I used the "input" event), but I think the solution that @WashingtonGuedes wrote in a comment to another answer is much simpler: this.value = this.value.slice(0, this.maxLength); Do you think this has any issue? I haven't found any so far. It covers pasted text too.
    – nonzaprej
    Commented Jul 24, 2019 at 10:39
  • I like the long way. The Usage of RegExp is very flexible.
    – harley81
    Commented Aug 23, 2019 at 12:40
6

this code worked for me

<form method="post">
      <label for="myNumber">My Number:</label>
      <input type="number" maxlength="9" required
      oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" >
     <br><br>
      <input type="submit" value="Submit">
</form>

5

Try this,

<input type="number" onkeypress="return this.value.length < 4;" oninput="if(this.value.length>=4) { this.value = this.value.slice(0,4); }" />
5

If you want to do it in a React Function Component or without using "this", here is a way to do it.

<input onInput={handleOnInput}/>

const handleOnInput = (e) => {
  let maxNum = 4;
  if (e.target.value.length > maxNum) {
    e.target.value = e.target.value.slice(0, maxNum);
  }
};
1
  • 1
    Thanks, this worked for me. Plus I updated this: let maxNum = 4; To let maxNum = e.target.getAttribute('maxlength'); that way I can use any max length number in my code and this should work.
    – lharby
    Commented Jul 12, 2021 at 8:48
5

<input type="number" min="1" onKeyPress="if(this.value.length==5) return false"/>

Use type number with min and handle max with onKeyPress

<input type="number" min="1" onKeyPress="if(this.value.length==5) return false"/>
4

In my experience most issues where people are asking why maxlength is ignored is because the user is allowed to input more than the "allowed" number of characters.

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

To have the field limit the number of characters that can be inserted while allowing the user to be aware of this before the form is submitted (browser should identify value > max otherwise), you will have to (for now, at least) add a listener to the field.

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

2
  • min and max are as good as useless here, they do not prevent the user from typing an inifinite amount of numbers in the input field.
    – andreszs
    Commented Feb 21, 2018 at 14:41
  • True. The only time you see them in action is when you're using the arrow keys or the up/down controllers (in Chrome, etc.). You can still use these attributes to tie into your subsequent validation, which has worked for me. This allows you to control limits via markup (i18n, etc.) vs. JS only.
    – M Wuori
    Commented Sep 18, 2018 at 5:55
4

maxlength ignored for input type="number"

That's correct, see documentation here

Instead you can use type="text" and use javascript function to allow number only.

Try this:

function onlyNumber(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)){
            return false;
        }
    return true;
}
<input type="text" maxlength="4" onkeypress="return onlyNumber(event)">

3

I know there's an answer already, but if you want your input to behave exactly like the maxlength attribute or as close as you can, 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();
1
  • I like this one, Tweaked it slightly for my own use, (I didn't want people to type in a "e" in chrome, which is allowed); Commented Nov 11, 2015 at 10:34
3

The absolute solution that I've recently just tried is:

<input class="class-name" placeholder="1234567" name="elementname"  type="text" maxlength="4" onkeypress="return (event.charCode == 8 || event.charCode == 0 || event.charCode == 13) ? null : event.charCode >= 48 && event.charCode <= 57" />
1
  • Because this is generic JS, it'll work everywhere. I'm working on a project using Angular 5 and it works like a charm. You can probably spend 10 minutes creating a service in your angular code so you can reuse it throughout your project. Commented Oct 16, 2018 at 12:21
3

Done! Numbers only and maxlength work perfect.

<input  maxlength="5" data-rule-maxlength="5" style="height:30px;width: 786px;" type="number"  oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength); this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" />
3

This code worked quite nicely for me.

In the input with type="number", you can add the following attribute:

oninput="constrainUserInput(this.id)"

The full input will look like this:

<input type="number" class="test_css" maxlength="4" oninput="constrainUserInput(this.id)" id="flight_number" name="number"/>

Note: You must assign your input and ID for this method to work

Then you can add the following JavaScript to your HTML, which basically replaces any characters that exceed your maxlength attribute with an empty quote (essentially removing them):

function constrainUserInput(id) {
  let input = document.getElementById(id);
  let value = input.value;
  if (value.length > input.maxLength) {
    input.value = value.substring(0, input.maxLength);
  }
}
2

As per the Neha Jain's answer above ,I just added below code to common area

$(':input[type="number"]').on('input', function() {
        if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);

});

then you can use maxlength="4" like text type fields.

1

<input type="number"> is just that... a number input (albeit, unconverted from a string to float via Javascript).

My guess, it doesn't restrict characters on key input by maxLength or else your user could be stuck in a "key trap" if they forgot a decimal at the beginning (Try putting a . at index 1 when an <input type"text"> "maxLength" attr has already been reached). It will however validate on form submit if you set a max attribute.

If you're trying to restrict/validate a phone number, use the type="tel" attr/value. It obeys the maxLength attr and brings up the mobile number keyboard only (in modern browsers) and you can restrict input to a pattern (i.e. pattern="[0-9]{10}").

0

I was able archive it using this.

<input type="text" onkeydown="javascript: return event.keyCode === 8 || event.keyCode === 46 ? true : !isNaN(Number(event.key))" maxlength="4">

Not the answer you're looking for? Browse other questions tagged or ask your own question.