step属性仅支持线性步长，无法实现“逢五进一”；需用input事件监听+Math.ceil(v/5)*5实时校准，但负数需特殊处理，推荐blur时校准以提升体验。
step 属性本身不支持“逢五进一”这种非线性递增
HTML input[type="number"] 的 step 属性只接受固定步长的线性增量（如 step="5" 表示每次加减 5），它无法实现“输入 1→跳到 5，输入 6→跳到 10，输入 12→跳到 15”这类条件式对齐。浏览器原生行为只做 value = round(value / step) * step 类型的四舍五入对齐，且仅在用户点击上下箭头或按 ArrowUp/ArrowDown 时触发，手动输入不受控。
用 input 事件 + Math.ceil 实现手动输入时的逢五进一
真正要让任意输入（比如键入 7 或粘贴 12.3）都自动“向上取整到最近的 5 的倍数”，得监听 input 事件并重写值：
<input type="number" id="fiveStepInput"><script>
const el = document.getElementById('fiveStepInput');
el.addEventListener('input', () => {
const v = parseFloat(el.value);
if (!isNaN(v)) {
// 向上取整到 5 的倍数：Math.ceil(v / 5) * 5
el.value = Math.ceil(v / 5) * 5;
}
});
</script>
- 注意：用
input而不是change，确保实时响应； -
parseFloat能处理空值、小数、科学计数法等； - 如果想允许 0 或负数，
Math.ceil对负数行为是“向零的反方向取整”，比如Math.ceil(-2 / 5) * 5 === 0，不符合直觉——此时应改用Math.floor((v - 1) / 5) * 5 + 5或更稳妥的v >= 0 ? Math.ceil(v / 5) * 5 : Math.floor(v / 5) * 5； - 该逻辑会覆盖用户正在编辑的过程（比如输到
1就跳成5），体验略突兀，可加防抖或只在失去焦点时触发。
结合 step="5" 和自定义逻辑，兼顾原生交互与手动输入
保留 step="5" 让上下箭头和键盘导航保持原生行为，再用 JS 补足粘贴、手动输入、初始赋值等场景：
<input type="number" step="5" id="robustFiveInput">
关键点：
- 设置
step="5"后，ArrowUp/ArrowDown 自动按 5 递增，无需 JS； - 但粘贴
"8"或输入"13"仍会保留原值，必须靠input或blur事件修正； - 若初始值为
value="7"，浏览器不会自动纠正，需在脚本中主动调用一次校准逻辑； - 移动端软键盘可能不显示数字键，
type="number"并不保证输入一定是数字，仍需parseFloat容错。
别忽略 focus/blur 时机和用户体验断层
纯 input 事件修正会让用户每敲一个数字都跳变（比如输 1→5→50→50），实际中更合理的是：
- 在
blur（失焦）时统一校准，让用户能完整输入再修正； - 或在
input中加简单判断：if (el.value && !el.value.endsWith('0') && !el.value.endsWith('5')) { ... }，只在末位明显不对时才触发； - 若后端要求严格，校验逻辑必须服务端重复执行，前端只是体验优化，不可信任。
逢五进一看着简单，但“什么时候改、改多少、负数怎么算、空值怎么清、是否允许中间态”，每个细节都会在真实表单里冒出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
