嘿，我来帮你理清楚这两个问题的根源，再给你直接好用的解决方案：

先说说为什么会出现这两个问题 #

• 问题1：输入过程中onchange不触发
  onchange事件的设计逻辑就是如此——它只会在输入框失去焦点，并且当前值和初始值发生了变化的时候才会触发。所以你在输入框里敲数字的过程中，只要还没点击外部（没失焦），它就不会调用你的someFunction。

• 问题2：调节箭头首次点击触发，后续不触发
  首次点击箭头时，输入框会从“无焦点”切换到“有焦点”状态，同时数值发生变化，部分浏览器会在这个节点触发onchange；但后续连续点击箭头时，输入框一直保持焦点状态，数值虽然在变，但因为没满足“失焦”这个条件，onchange就不再触发了。

完美解决方案：改用input事件 #

想要实现输入时实时触发、每次点击调节箭头都触发的效果，直接把onchange换成oninput就搞定了：

<input type="number" oninput="someFunction()" />

input事件的触发逻辑是：只要输入框的数值发生变化，不管有没有失去焦点，都会立刻触发。不管你是手动输入数字、点击上下调节箭头、甚至用滚轮在输入框上滚动改变数值，它都会实时调用你的someFunction。

如果需要同时处理失焦时的额外逻辑（比如验证最终输入值），可以同时保留onchange：

<input type="number" oninput="someFunction()" onchange="finalValidation()" />

给你一个完整的测试示例：

<input type="number" id="numInput" oninput="someFunction()" />
<p id="output"></p>

<script>
function someFunction() {
  const input = document.getElementById('numInput');
  document.getElementById('output').textContent = `当前数值：${input.value}`;
}
</script>

这样不管你怎么修改数值，页面上都会实时显示最新结果，完全解决你的两个问题~

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