如何让number类型input基于当前值±10步进而非按倍数步进？

我有一个type="number"的输入框，想要点击向上箭头时，当前值直接加10（比如当前是12，点完变22）；点向下箭头时直接减10。设置step="10"后发现不对：当前值是33的话，点向上箭头会变成40而不是43，只会按10的倍数跳。怎么实现基于当前值±10的步进效果？

初始代码：

<input type="number" id="txtIncrementBy10" step="10" min="0" name="txtIncrementBy10" value="0" />

原生step属性的逻辑是将值对齐到step的整数倍，也就是从最近的有效步进值开始计算增减，而不是在当前值基础上直接加减。比如33距离最近的10的倍数是30，加10就变成40，这就是问题所在。

通过JavaScript监听步进按钮的交互事件，覆盖原生逻辑，手动计算增减值：

<input type="number" id="txtIncrementBy10" min="0" name="txtIncrementBy10" value="0" />

<script>
const numInput = document.getElementById('txtIncrementBy10');

// 监听向上箭头点击
numInput.addEventListener('stepup', (e) => {
  e.preventDefault(); // 阻止原生步进行为
  const currentVal = parseInt(numInput.value) || 0;
  numInput.value = currentVal + 10;
});

// 监听向下箭头点击
numInput.addEventListener('stepdown', (e) => {
  e.preventDefault(); // 阻止原生步进行为
  const currentVal = parseInt(numInput.value) || 0;
  const minVal = parseInt(numInput.min) || 0;
  // 确保不低于最小值
  numInput.value = Math.max(currentVal - 10, minVal);
});

// 可选：处理手动输入的非法值
numInput.addEventListener('blur', () => {
  const currentVal = parseInt(numInput.value) || 0;
  const minVal = parseInt(numInput.min) || 0;
  numInput.value = Math.max(currentVal, minVal);
});
</script>

说明 #

1. 移除了step="10"，避免原生逻辑干扰；如果一定要保留该属性，必须在事件中调用e.preventDefault()阻止默认行为。
2. stepup和stepdown是number输入框点击上下箭头时触发的专属事件，能精准捕获操作。
3. 加入了最小值判断，确保递减后的值不会低于min设置的0。
4. 新增blur事件处理，防止用户手动输入小于最小值的内容。

如果需要兼容极少数不支持stepup/stepdown的浏览器，可以改用监听input事件并对比前后值，或者监听鼠标点击位置，但stepup/stepdown是最直接的方案。

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