input number组件step递减结果不符合预期，求原因及解决方法

问题场景 #

设置了如下数字输入框：

<input type="number" min="0" max="100" step="7" value="100">

点击递减按钮后，结果为98，而非预期的93，且Edge、Chrome、Firefox最新版均存在此问题。

原因分析 #

这是浏览器遵循HTML规范对step属性的处理逻辑导致的：

• 数字输入框的合法值必须满足 min + n × step（n为整数），同时处于min和max范围内。
• 你的配置中，合法值序列为0、7、14...98（7×14=98，下一个值105超过max=100），100不属于该合法序列。
• 当点击增减按钮时，浏览器会先将当前无效值修正为最近的合法值：对于100来说，最近的合法最大值是98，因此点击递减按钮时，浏览器直接将值修正为98，而非执行100-7=93（93同样不属于合法序列）。

解决办法 #

方案1：使用合法初始值 #

将初始value设置为合法序列中的最大值98，这样点击递减按钮会直接得到91（98-7），符合step规则：

<input type="number" min="0" max="100" step="7" value="98">

方案2：用JavaScript手动控制逻辑 #

如果必须保留初始值100，且需要点击递减得到93，可通过JS覆盖浏览器默认行为：

const input = document.querySelector('input[type="number"]');
input.addEventListener('click', (e) => {
  const currentVal = parseInt(input.value, 10);
  let newVal = currentVal - 7;
  newVal = Math.max(newVal, parseInt(input.min, 10));
  input.value = newVal;
});
// 监听手动输入，避免值超出范围
input.addEventListener('input', () => {
  const currentVal = parseInt(input.value, 10);
  const maxVal = parseInt(input.max, 10);
  if (currentVal > maxVal) {
    input.value = maxVal;
  }
});

注：可根据实际交互场景调整事件监听逻辑，确保覆盖所有触发值变化的操作。

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