如何限制number输入框仅保留两位小数且不超过最大值，修复现有代码不生效问题

问题根源 #

• 你同时绑定了行内oninput和addEventListener两套输入事件，两者触发顺序不可控，修改后的值没有同步走完两套校验逻辑
• 赋值最大值后没有二次校验小数位数，会出现超过两位小数的异常
• 没有处理非法输入导致的NaN边界场景

解决方案 #

把两套校验逻辑合并到同一个事件回调中，先处理小数位数，再处理数值范围校验即可。

修改后的HTML代码 #

去掉行内的oninput属性，避免事件冲突：

<input type="number" min="100" max="999.99" step=".01" name="amt" id="amt" required>

修改后的JS代码 #

var input = document.getElementById("amt");
input.addEventListener("input", function(e){
    let currentVal = this.value;
    // 第一步：校验并保留两位小数
    if (currentVal.indexOf(".") >= 0) {
        currentVal = currentVal.substr(0, currentVal.indexOf(".")) + currentVal.substr(currentVal.indexOf("."), 3);
        this.value = currentVal;
    }
    // 第二步：校验数值范围
    const max = parseFloat(this.max);
    const min = parseFloat(this.min);
    const numVal = parseFloat(currentVal);
    this.setCustomValidity("");

    if (!isNaN(numVal)) {
        if (numVal > max) {
            // 赋值最大值时强制保留两位小数
            this.value = max.toFixed(2);
        } else if (numVal < min) {
            this.setCustomValidity("未达到最低金额要求");
        }
    }
});

内容的提问来源于stack exchange，提问作者boldsinas101