step属性仅对type="number"等特定类型生效，需与min、max、value协同；脱离上下文设置会被忽略，小数精度问题应换算单位或用step="any"，动态修改需重置value并校验。
直接说结论：step 属性不是“设了就起效”的独立开关，它只在特定 type 下参与校验和微调行为，且必须和 min、max、value 协同才能稳定工作。脱离上下文乱写 step="0.1"，大概率被浏览器静默忽略或修正成意外值。
为什么 type="text" 加 step="0.1" 完全没反应
这是最常踩的坑——step 仅对 type="number"、type="range"、type="date" 等少数类型生效。type="text" 或 type="tel" 上写的 step，浏览器解析但完全不执行：箭头不出现、键盘上下键无效、checkValidity() 不报 stepMismatch。
- 想让数字输入带步进，必须显式写
<input type="number" step="0.5"> -
type="range"虽支持step，但它的滑块吸附逻辑是独立的，不等同于number的增减控制 - 移动端 iOS Safari 对
type="number"的小数点支持极差，step="0.1"时可能根本不弹出小数点键，用户根本输不了小数
step="0.1" 输入 0.15 后自动变成 0.2 怎么办
这不是 bug，是浏览器按规范做的自动修正：value 失焦时会四舍五入到最近的合法步进值（即满足 (value - min) % step === 0 的值）。如果你需要保留原始输入精度（比如价格录入），别依赖这个自动行为。
- 金额类场景强烈建议换算单位：用“分”代替“元”，写
min="100"、step="1"、value="199" - 必须用小数时，统一小数位数：
min="0.00"、max="10.00"、step="0.01"，避免混用min="0"和step="0.01" - 若需任意精度输入（如地理坐标），改用
step="any"，但注意：此时上下箭头退化为 ±1，仍需 JS 在blur时做格式化或校验
动态修改 step 后 spinner 失灵或跳变异常
直接赋值 input.step = "0.25" 不可靠。浏览器不会自动重算合法值集合，旧 value 很可能已越界，导致拖不动、点箭头跳到非预期值。
- 改用
input.setAttribute("step", "0.25")，部分浏览器响应更稳定 - 紧接着重置
value：先对齐步进基准，例如input.value = (Math.round(parseFloat(input.value) / 0.25) * 0.25).toFixed(2) - 调用
input.checkValidity()主动校验，必要时input.reportValidity()显示提示 - 连续切换
step时，用requestAnimationFrame延迟重置value，避免状态残留
实现±按钮时为什么不能用 parseFloat(val) + 0.1
JS 浮点运算误差会导致 0.1 + 0.2 !== 0.3，你看到的 0.30000000000000004 就是这么来的。这不是 step 的问题，而是 JavaScript 数值模型的固有特性。
- 优先调用原生方法：
input.stepUp(1)和input.stepDown(1)，它们严格按当前step执行，不引入 JS 浮点误差 - 如果要自定义步长（比如每次±0.25），不要自己算，而是先
input.step = "0.25"，再调用stepUp() - 非线性映射（如对数缩放）不能靠改
step实现，得用 JS 把线性滑块位置映射为目标值，step只管底层线性增量
真正麻烦的从来不是怎么写 step，而是用户粘贴、滚动鼠标滚轮、第三方输入法这些行为——它们完全绕过 step 约束。step 只管受控增减和提交校验，强一致性必须靠 JS 监听 input 或 blur 补充处理，后端兜底更是不可省略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
