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 acplish 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.

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 acplish 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.

• javascript
• html
• css

• 2 what is int()? Did you write that function yourself or did you expect that to convert the value to an integer? – daddygames Commented May 8, 2019 at 20:00
• I expect it to convert the value to an integer – Udasi Tharani Commented May 8, 2019 at 20:13

2 Answers 2

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(); }
          });`
    

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/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;
    }
}