如何动态获取包含±按钮修改的数字输入框值？

嘿，这个问题我当初踩过坑！你之前用input事件没捕获到±按钮的变化，大概率是碰到了某些特殊场景或者旧浏览器的兼容问题？不过别担心，咱们可以用一个稳妥的方案，覆盖所有可能修改数字输入框值的场景，完美满足你的需求：

解决方案思路 #

对于<input type="number">，要覆盖手动输入、点击±按钮、鼠标滚轮修改这几种常见的改值方式，我们只需要给输入框绑定几个关键事件，然后复用同一个值处理函数就行。

完整代码示例 #

首先是HTML结构：

<input type="number" id="quantityInput" value="1" min="1" max="10">

然后是JavaScript逻辑：

// 获取输入框元素
const quantityInput = document.getElementById('quantityInput');

// 定义统一的处理值变化的函数
function updateInputValue() {
  const currentValue = quantityInput.value;
  console.log('当前输入框的值：', currentValue);
  // 这里可以添加你需要的业务逻辑，比如更新总价、展示提示等
}

// 绑定多个事件，覆盖所有改值场景
quantityInput.addEventListener('input', updateInputValue);
quantityInput.addEventListener('change', updateInputValue);
quantityInput.addEventListener('wheel', updateInputValue);

事件说明 #

• input事件：这是核心！它会在用户手动输入、点击输入框的±按钮时实时触发，能捕获绝大多数场景的数值变化。
• change事件：作为补充，当输入框失去焦点时，如果值有变动也会触发，能覆盖一些input事件没捕捉到的边缘情况（比如某些浏览器下的特殊交互）。
• wheel事件：处理用户用鼠标滚轮滚动修改输入框值的场景，很多用户会习惯这么操作，加上它更周全。

这样设置之后，不管用户用哪种方式修改数字输入框的值，你都能实时获取到最新的数值啦！

备注：内容来源于stack exchange，提问作者Brijesh Kumar