如何检测number类型input输入框的数值增减变化

核心思路 #

通过一个外部变量存储输入框的上一次数值，每次触发数值变化事件时，将当前值和上一次存储的数值做对比，即可判断增减状态。注意需要把input返回的字符串类型值转为数字类型再比较，避免出现非预期的比对结果。

完整代码实现 #

HTML代码保持你原有写法即可：

<input id="myInput" type = "number" value = "0">

JavaScript代码修改为如下逻辑：

// 缓存输入框元素，避免重复查询DOM提升性能
const numberInput = document.getElementById("myInput");
// 初始化上一次数值，取输入框默认值并转为数字类型
let lastValue = Number(numberInput.value);

numberInput.addEventListener("change", function() {
    const currentValue = Number(numberInput.value);
    
    if (currentValue > lastValue) {
        console.log("数值增加了");
        // 此处填写数值增加后的业务逻辑
    } else if (currentValue < lastValue) {
        console.log("数值减少了");
        // 此处填写数值减少后的业务逻辑
    } else {
        console.log("数值无变化");
    }

    // 比对完成后更新上一次数值，供下次判断使用
    lastValue = currentValue;
});

可选优化 #

• 如果你需要实时检测数值变化（不需要等输入框失焦就触发判断），可以把事件类型从change换成input，只要输入框数值发生变化就会立即触发回调。
• 如果需要限制输入范围，可以直接在input标签上增加min、max属性，原生即可支持数值范围限制，无需额外写JS校验。

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