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

【问题标题】：How to prevent inserting value that is greater than to max in number field in html如何防止在html中的数字字段中插入大于最大值的值
【发布时间】：2016-04-07 06:40:18
【问题描述】：

我在html5中使用数字字段，

这是我的代码，

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

我使用 javascript 设置了这个数字字段的最大值。

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

如果我在数字字段中使用向上箭头。大于最大值的值是不可能的。但是当我尝试在该字段中插入时，可能会出现大于最大值的值。

我想阻止它。怎么样？

【问题讨论】：

Html 允许您插入任何值，但是当您点击提交按钮时，它将检查验证并显示警告并阻止提交，直到用户更正该值。

标签： javascript html forms numbers field

【解决方案1】：

就像你说的 number 类型的输入可以很好地使用箭头而不是手动更改，因此请尝试使用 oninput 事件来帮助您控制用户输入：

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

        if (parseInt(this.value) > max) {
            this.value = max; 
        }
    }

&lt;input type="number" class="edit-items" max='10'/&gt;

希望这会有所帮助。

【讨论】：

【解决方案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();

【讨论】：