如何防止在html的数字字段中插入大于最大值的值

Question

I am using number field in html5,

here is my code,

<input type="number" class="edit-items" />

i set the max of this number field using javascript.

element.max = quantity;
element.min = 0;
element.step = 1;

If i am using the arrow-up in the number field. Greater value than the max is not possible. But when I tried to insert in the field, greater value than the max is possible.

I would like to prevent it. How?

Answer 1

Like you said input of type number will work fine with arrows and not with manual change so try to use oninput event to help you control user inputs :

 document.getElementsByClassName('edit-items')[0].oninput = function () { var max = parseInt(this.max); if (parseInt(this.value) > max) { this.value = max; } }

 <input type="number" class="edit-items" max='10'/>

Hope this helps.

Answer 2

Add an event listner on the input (oninput) : check it here : on change sample

function maxValue(){
    var numbers = document.getElementById("numbers");
    console.log(numbers);
    var maxQuantity = 5;

    numbers.addEventListener("input", function(e) {
        if(this.value>maxQuantity) {
            alert("max value reached ! ");
            this.value = maxQuantity;
        }
    })
};
window.onload = maxValue();