如何让input type="number"点上下箭头步长10且支持自定义输入合法数值

这个需求的核心矛盾是原生input[type=number]的step属性会强制校验输入值必须为步长的整数倍，不符合允许任意合法值的要求，因此我们放弃直接设置step="10"，改为通过JS单独控制步进逻辑，同时保留原生属性做范围限制即可。

完整可运行代码 #

<!-- 原生属性先做基础范围限制，禁止输入负数、非数字字符 -->
<input type="number" id="numInput" min="0" max="100">

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

// 监听步进事件（点击上下箭头、按键盘上下键都会触发）
numInput.addEventListener('input', function(e) {
  // 仅处理步进触发的输入，跳过手动输入场景
  if (e.inputType === 'insertReplacementText' || e.inputType === undefined) {
    const currentVal = Number(this.value);
    if (isNaN(currentVal)) return;
    // 按10的步长取整后赋值
    this.value = Math.round(currentVal / 10) * 10;
  }
});

// 失焦时补充范围校验，自动修正超出0-100的数值
numInput.addEventListener('blur', function() {
  let val = Number(this.value);
  if (isNaN(val)) {
    this.value = '';
    return;
  }
  this.value = Math.max(0, Math.min(100, val));
});
</script>

功能说明 #

• 点击上下箭头或者按键盘上下键调整数值时，会按10的步长增减，和原生步进体验一致
• 手动输入时不会触发步长限制，可以输入33、47这类任意非负、不超过100的合法数值
• 原生属性自动屏蔽非数字字符输入，失焦时自动修正超出范围的非法值，无需额外处理提交校验

内容的提问来源于stack exchange，提问作者Tan Si Kai