How to set maximum length in input type=number?

Question

I have a text field.

<input type="number" min="0" max="999">

But i am able to type as many numbers inside the text box.

As I set max=999, I don't want that to happen. Anyone knows the solution for this? I have tried ng-maxlength and maxlength but doesn't work.

you create a text feild and give max=999, and still you will be able to type 111111111 (even if not a valid entry) i want to block that, i dont want to block entering 4 digit number in the text feild — vishnuprasad kv, May 31 '16 at 06:33
in the fiddle i have limit 999, still you will be able to type as many numbers as you want — vishnuprasad kv, May 31 '16 at 06:36
i found that maxlength property only work in type="text" so i need a solution — vishnuprasad kv, May 31 '16 at 06:38
Try This Tag or you have to use the script function on change to restrict the user to enter Value. — Snopzer, May 31 '16 at 06:38
`min` and `max` are used for validation purpose, they don't prevent you from writing inside the input not valid numbers. — Fez Vrasta, May 31 '16 at 06:41
Why do you care? As long as there's only 3 characters max when the data is submitted. How the user gets to 3 characters is up to them. — RobG, May 31 '16 at 06:58
I think you get your ans from here http://stackoverflow.com/questions/8354975/how-to-add-maxlength-for-html5-input-type-number-element — Mohaimin Moin, May 31 '16 at 07:24

score 52 · Accepted Answer · edited May 23 '17 at 11:47

52

max attribue specifies the maximum possible value that we can specify.

for more details see this link

I think the following will be helpful to you,

//maxlength="10"
<input type="number" onKeyPress="if(this.value.length==10) return false;" />

edited May 23 '17 at 11:47

Community

1
1

answered May 31 '16 at 06:41

Reshma Reghunatha Panicker

1,091
10
22

3

when it reaches 10 charectors, i am not able to remove the number(backspace not working) – vishnuprasad kv May 31 '16 at 06:50
Changed onKeyDown to onKeyPress... check once again – Reshma Reghunatha Panicker May 31 '16 at 06:53
[Firefox Quantum]The same is happening, neither backspace or another key works. It can only be changed with the number's arrows up or down. [Chrome] Works fine! – bogdan.rusu Dec 09 '17 at 12:19
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeypress – Tomer Nov 27 '19 at 08:57
If you're using React, you may have to use `onKeyPress={(e) => { if (e.target.value.length >= 12) e.preventDefault() }}` – Isaac Muniz Jun 14 '22 at 18:08

score 3 · Answer 2 · answered Nov 12 '19 at 10:31

3

The solution that worked for me is to use onkeypress with the max attribute. For e.g. for max length of 999

<input type="number" max="999" onkeypress="if (this.value.length > 2) return false;"/>

Tested in Chrome, Firefox and Edge.

answered Nov 12 '19 at 10:31

Scorpionk

418
6
13

It works, but if you input operators like plus and minus, it destroys the functionality. – Awoooooooooooooooooooo May 22 '23 at 01:21

score 2 · Answer 3 · answered May 31 '16 at 06:37

Try This

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  var oldNumber = 0;
  $scope.numberChanged = function(number){
    if(number<=999){
      oldNumber = number;
    }
    return oldNumber;
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<div  ng-app="mainApp" ng-controller="mainCtrl">
  <input type="number" min="0" max="999" ng-model="jimNum" ng-change="jimNum = numberChanged(jimNum);">
</div>

score 1 · Answer 4 · answered May 31 '16 at 06:44

1

Try

<input type="number" min="0" max="999" 
   onKeyUp="if(this.value>999){this.value='999';}else if(this.value<0){this.value='0';}"
id="yourid">

answered May 31 '16 at 06:44

mujuonly

11,370
5
45
75

Note that if the user adjusts the value using the field controls, they likely will not dispatch any keyboard event, so the *onkeyup* listener won't be called. – RobG May 31 '16 at 07:13

score 0 · Answer 5 · answered May 31 '16 at 06:45

0

There is JSFiddle, using JQuery.

Your input

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

The script :

$("#num").keypress( function(e) {
    var current_val = $(this).val();
    var typing_char = String.fromCharCode(e.which);
if (parseFloat(current_val + "" +typing_char) > 900) {
    return false;
}

})

answered May 31 '16 at 06:45

Jax Teller

1,447
2
15
24

That restricts the maximum value to 900, and allows any size negative number. Far better would be something like `var v = this.value; if (v > 999) this.value = v.substr(0,2)` with additional logic for negative numbers (whatever they might be). – RobG May 31 '16 at 07:07
yeah, my bad, forgot about the min val, but he can fix it easily with all answer now. – Jax Teller May 31 '16 at 07:12

Hassan Tarique · Answer 6 · 2019-06-19T10:51:46.207

0

if you are limit the single field

  <TextField type="number"
    className="text-field-amount"
    onInput={(e)=>{ 
        e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,2)
    }}
    min={0}

edited Jun 19 '19 at 10:51

answered Jun 19 '19 at 10:37

Hassan Tarique

1
1

It limits the numbers up to 2 digits – Hassan Tarique Jun 19 '19 at 10:53

score 0 · Answer 7 · edited Jun 19 '19 at 11:13

if you are mapping more then one number Text field through map then do like this

     <TextField
                      key={key}
                      label={row.q_desc}
                      type="number"
                      onChange={this.onChange}
                      onInput={this.onInput}

                    />

    onInput= event => {
    event.preventDefault();

    debugger;
    var textField_name = this.state.input_Name;
    if (textField_name == "Zip") {
      event.target.value = Math.max(0, parseInt(event.target.value))
        .toString()
        .slice(0, 4);
    }

    if (textField_name == "Social Security") {
      event.target.value = Math.max(0, parseInt(event.target.value))
        .toString()
        .slice(0, 9);
    }
    if (textField_name == "Phone") {
      event.target.value = Math.max(0, parseInt(event.target.value))
        .toString()
        .slice(0, 10);
    }
  };



 onChange(e) {
          debugger;

         this.setState({
            input_Name: e.target.name
         });
  }

How to set maximum length in input type=number?

7 Answers7

Linked