Question

我在html5中使用数字字段，

这是我的代码，

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

我使用javascript设置此数字字段的最大值。

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

如果我在数字字段中使用向上箭头。不可能获得比最大值更大的价值。但是当我尝试插入字段时，可能比最大值更大的值。

我想阻止它。怎么样？

Answer 1

与您说的那样，number类型的输入可以正常使用箭头而不是手动更改，因此请尝试使用oninput事件来帮助您控制用户输入：

    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'/>

希望这有帮助。

Answer 2

在输入上添加事件列表器（oninput）：在这里查看：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();

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

2 个答案: