How to fix input exceeding max value in html input type = 'number'?

Question

I want the number type html input element to take the input through keyboard, and if the last number pressed makes it exceed the max value, that last key press should be discarded.

I tried using javascript to accomplish that.

Here's the code

<input type="number" id = 'customer-age-input' max="120" min="0" onkeypress="javascript: if (int(this.value) > int(this.max)) this.value = 0;">

What is actually happening is different from expected. It takes whatever inout I type-'123', '1234' etc. but when I press the arrow up key it doesn't increase the value as it does by default when the value is less than max. Also, when I press arrow-down key, it reduces it to the max value.

what is int()? Did you write that function yourself or did you expect that to convert the value to an integer? — daddygames, May 08 '19 at 20:00

score 1 · Answer 1 · answered May 08 '19 at 20:37

int is not a built-in function for the current version of JavaScript. The syntax is parseInt(value);

Read about parseInt here -> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

You can use the oninput event to detect when the value changes. This is where you check the value and adjust, if needed. However, it's important to note that once you reach the max or min value, the arrows on the control will not fire this event. So you can't just roll it over from MAX_VALUE to MIN_VALUE using the arrow keys.

Read more here -> What events does an <input type="number" /> fire when it's value is changed?

Putting this all together...

HTML

<input type="number" id="customer-age-input" max="120" min="0" oninput="checkValue(this);" />

JavaScript

// this function will convert a string to an integer
// beware this will throw an exception if the value does not parse properly
function int(value) {
    return parseInt(value);
}

// this checks the value and updates it on the control, if needed
function checkValue(sender) {
    let min = sender.min;
    let max = sender.max;
    let value = int(sender.value);
    if (value>max) {
        sender.value = min;
    } else if (value<min) {
        sender.value = max;
    }
}

I've only created the int function out of courtesy of your design. You can just use parseInt in place of the customized int function in the code above. The new code would look something like:

JavaScript

// this checks the value and updates it on the control, if needed
function checkValue(sender) {
    let min = sender.min;
    let max = sender.max;
    // here we perform the parsing instead of calling another function
    let value = parseInt(sender.value);
    if (value>max) {
        sender.value = min;
    } else if (value<min) {
        sender.value = max;
    }
}

Hi there! I really appreciate that you tried to help me with this problem! Your answer works fine! But there is a little problem. The input field also allows input greater than max value when I type those values. Do youhave any idea why that might be happening? — Udasi Tharani, May 09 '19 at 15:24
I've tested this in IE11, Chrome 73, and Firefox 60. When a value greater than max is entered, the value is set to 0. The code does not allow for greater than max. Are you getting any errors in the console? — daddygames, May 09 '19 at 15:54

Abhishek Sinha · Answer 2 · 2020-01-17T20:07:07.963

Max value only work if the value is inserted using arrow keys or using up or down button on input tag. It is also validated when the form is submitted but if you want to force the browser to not let the user enter any greater value then max value then you can check the input value at keydown event and if the new value will exceed the max value then you can add preventdefault for the event. This way the value will not be inserted. This is the demo code for doing this trick using jquery. You can also do the same trick for min value by changing the condition accordingly.

    
          `$('input[type=number]').on('keydown' , (event)=>{
                let key = event.key;
                let value = event.target.value;
                let new_value = Number(value + key);
                let max = Number(event.target.max);
                if(new_value > max){ event.preventDefault(); }
          });`

Code only answers are rarely helpful. Please comment your code or expound on why this is the solution to the question. — RyanNerd, Jan 10 '20 at 11:51

How to fix input exceeding max value in html input type = 'number'?

2 Answers2