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

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

希望这可以帮助。