Sounds trivial, but it doesn't work for me... I tried to set a max length of NUMBER input, but it doesn't work. Your help is appreciated. Here's my code. Both don't work in Chrome

<input id="demo02" type="number">

$(document).ready(function(){
$("#demo02").attr('maxlength','2');
});

$(document).ready(function(){
$("#demo02").prop('maxlength','2');
});

Sounds trivial, but it doesn't work for me... I tried to set a max length of NUMBER input, but it doesn't work. Your help is appreciated. Here's my code. Both don't work in Chrome

<input id="demo02" type="number">

$(document).ready(function(){
$("#demo02").attr('maxlength','2');
});

$(document).ready(function(){
$("#demo02").prop('maxlength','2');
});

• javascript
• jquery
• html
• input

• 1 You cannot set maxlength for inputs of type number. – Tsvetan Ganev Commented Dec 28, 2017 at 22:10
• 1 maxlength does not work on number inputs, only text, email, search, password, tel, or url developer.mozilla/en-US/docs/Web/HTML/Element/input – skyline3000 Commented Dec 28, 2017 at 22:11

2 Answers 2

maxlength is not a valid attribute for input type="number".

With this in mind, we will use the valid max attribute to get its value length and use it as a maxlength within an input event listener.

We will target the input elements of type number that have a max attribute set:

$('input[type=number][max]:not([max=""])')

Code Snippet:

$(document).ready(function() {

  $('input[type=number][max]:not([max=""])').on('input', function(ev) {
    var $this = $(this);
    var maxlength = $this.attr('max').length;
    var value = $this.val();
    if (value && value.length >= maxlength) {
      $this.val(value.substr(0, maxlength));
    }
  });

});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" max="99999">

Use max attribute to limit the highest available number. If you set max to 99, you can't go any higher.

$("#demo02").attr('max','99');

Or with plain Javascript:

document.getElementById('demo02').setAttribute('max', 99);

document.getElementById('demo02').setAttribute('max', 99);

<input id="demo02" type="number">