step属性仅约束number输入框的增减步长和校验，不改变显示值；需同时满足type="number"、step="10"及value为10的整数倍才能确保每次增减严格为10。
step属性对number输入框的单位控制逻辑
step 属性本身不改变输入框的“显示值”，只约束用户通过上下箭头或键盘增减时的最小变化量，以及表单校验时的合法取值。想让每次点击增减按钮变化 10，step="10" 就够了——但前提是 value 初始值本身是 10 的整数倍，否则第一次点击可能“跳不稳”。
为什么设了 step="10" 还是每次加 1？
常见原因有三个：
- 浏览器默认把未指定
value的<input type="number">当作空值处理，某些版本 Chrome 会回退到step="1"行为 -
value是字符串如"5"或带小数如"15.5"，而step="10"要求所有合法值满足(value - min) % step === 0（min 默认为负无穷，实际校验会宽松，但初始值不合规会导致行为异常） - 用了
inputmode="numeric"但没设type="number"，此时step完全被忽略
确保每次增减严格为 10 的写法
必须同时满足三项：
- 显式声明
type="number" - 设置
step="10" -
value初始化为 10 的整数倍，例如value="0"、value="100"；如果动态赋值，用 JS 写el.value = Math.round(el.value / 10) * 10对齐
示例：
立即学习“前端免费学习笔记（深入）”；
<input type="number" step="10" min="0" value="0">
这样在支持 step 的浏览器中，点一次向上箭头就是 +10，向下就是 −10。
移动端和 Safari 的兼容注意点
iOS Safari 和部分安卓 WebView 对 step 支持较弱：
- Safari 15.4 之前不响应
step的箭头增减（仅表单校验生效） - 很多安卓原生键盘忽略
step，只靠 JS 拦截input事件做四舍五入修正更可靠 - 若需强一致性，建议监听
change或input事件，用Math.round(parseFloat(e.target.value) / 10) * 10重置值
真正起作用的从来不是 step 自身，而是它和初始值、type、浏览器实现三者咬合的那一点——漏掉任意一个，就容易在测试时发现“明明写了 step=10，怎么还是加 1”。
