Allow only 2 numbers on input type number

Question

How to set a range between 0 and 99 on a input type number? I am using HTML5 attributes ( min="0" max="99" ) but it's not working and as far as I know this kind of attribute is not supported by some browsers.

So I am using this script which blocks non-numerical characters but I want to limit the numbers to a max of 99 (only 2 digits). How can I do that?

Also I want to allow users to use the keyboard to type the numbers.

$(".js-number").numeric();

jsFiddle

its working man. I have update http://jsfiddle.net/gnLz004r/2/ put more than two number then enter or click anywhere, it will says Please select a value more than 2..... — CodeLove, Oct 23 '15 at 10:08
@CodeLove, It is not saying so in chrome 46.0.2490.80. Op wants to limit the numbers — Rayon, Oct 23 '15 at 10:12
then use javascript for going to http://jsfiddle.net/ySt7S/86/ — CodeLove, Oct 23 '15 at 10:15

score 2 · Answer 1 · answered Oct 23 '15 at 10:10

<input class="test-input" type="number" maxlength="12" />
<script>
$('.test-input').unbind('keyup change input paste').bind('keyup change input paste',function(e){
    var $this = $(this);
    var val = $this.val();
    var valLength = val.length;
    var maxCount = $this.attr('maxlength');
    if(valLength>maxCount){
        $this.val($this.val().substring(0,maxCount));
    }
}); 
</script>

Sagi · Accepted Answer · 2015-10-23T11:22:58.970

1

Your example works if you remove the $(".js-number").numeric();
But you can edit the input.
maxlength attribute works on input type text, so I guess javascript validation is inevitable.

 <input type="number" class="js-number" min="0" max="99" value="0">   
 <script>
    $(".js-number").bind('keydown', function(e){
       var targetValue = $(this).val();
       if (e.which ===8 || e.which === 13 || e.which === 37 || e.which === 39 || e.which === 46) { return; }

       if (e.which > 47 &&  e.which < 58  && targetValue.length < 2) {
          var c = String.fromCharCode(e.which);
          var val = parseInt(c);
          var textVal = parseInt(targetValue || "0");
          var result = textVal + val;

          if (result < 0 || result > 99) {
             e.preventDefault();
          }

          if (targetValue === "0") {
            $(this).val(val);
            e.preventDefault();
          }
       }
       else {
           e.preventDefault();
       }
    });
 </script>

edited Oct 23 '15 at 11:22

answered Oct 23 '15 at 10:16

Sagi

8,972
3
33
41

It's working. You can not edit it using keystrokes only by clicking the arrows of the input – Sagi Oct 23 '15 at 10:46
But this is not ideal. I want to allow users to type the number using the keyboard. – brunodd Oct 23 '15 at 10:47
You should have mentioned it. You'll need different javascript validation approach – Sagi Oct 23 '15 at 10:49
I've just added that on the question. – brunodd Oct 23 '15 at 10:51

Urvish Joshi · Answer 3 · 2020-06-30T06:40:55.267

function format(input){
    if(input.value < 0) input.value=Math.abs(input.value);
    if(input.value.length > 2) input.value = input.value.slice(0, 2);
    $(input).blur(function() {
       // if(input.value.length == 1) input.value=0+input.value;
       // if(input.value.length == 0) input.value='01';
       //* if you want to allow insert only 2 digits *//
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" name="number" step="1" oninput="format(this)">

It works for me... hope for you as well :)

score 0 · Answer 4 · answered Oct 23 '15 at 10:05

0

you can set like this:

<input type="text" class="js-number" maxlength="2">

answered Oct 23 '15 at 10:05

Vijay Astound

75
8

http://stackoverflow.com/questions/8354975/how-to-add-maxlength-for-html5-input-type-number-element – Vijay Astound Oct 23 '15 at 10:09
@RayonDabre Did you check the fiddle? – brunodd Oct 23 '15 at 10:11
2

@brunodd, `maxlength` will work but it will accept characters too if type is not a number – Rayon Oct 23 '15 at 10:14
this is a wrong answer title says `Allow only 2 numbers` who is upvoting this answer – guradio Oct 23 '15 at 10:17
@RayonDabre it seems that if I remove type="number" it works: http://jsfiddle.net/brunodd/gnLz004r/7/ – brunodd Oct 23 '15 at 11:06

score 0 · Answer 5 · edited Sep 19 '21 at 12:01

You can just use maxlength="2" in input of html and this.value = this.value.replace(/[^\d]/, '') in Javascript function

maxlength="2" : It allows only two entries in the input by text (lets take it number) so the maximum two digit number is 99 and minimum two digit number is -9 (- is also considered as a entry) but if - sign is removed than minimum number is 00 , which solves the range of 00-99

Now the input is type=text so any alphabet can be entered along with symbols (- @ $...) to solve that JavaScript Regular Expression

this.value = this.value.replace(/[^\d]/, '') : It take the value from the input on each entry of a digit and check if it is a number or not . If it is a number then the entry will be leaved as it is but if entry is not a number than it is replace by '' means removed from the input . So only number entry is solved without a - sign too

document.getElementsByClassName("orderUnits")[0].addEventListener("input", amountofUnits);

function amountofUnits() {
  this.value = this.value.replace(/[^\d]/, '')
}

<input type="text" class="orderUnits" maxlength="2">

Allow only 2 numbers on input type number

5 Answers5