step 属性仅对 type="number"、"range"、"date"、"time"、"datetime-local"、"month"、"week" 有效；在 "color" 或 "text" 中被忽略，需配合 min/max/value 才能约束行为。
step 属性不是“设了就起效”的独立开关，它只在特定 type 下生效，且必须和 min/max/value 协同才能真正约束用户行为。
哪些 input type 支持 step 属性
step 只对 type="number"、type="range"、type="date"、type="time"、type="datetime-local"、type="month"、type="week" 有效；type="color" 或 type="text" 上写 step 完全被忽略——浏览器解析但不执行，DevTools 里能看到属性存在，但 spinner 按钮、校验、增减逻辑全部无反应。
常见误用：<input type="text" step="0.01"> 看似想限制小数位，实际等同于没写；必须改成 type="number" 才触发步长逻辑。
step="0.1" 为什么总报“值必须为 0.1 的倍数”
这不是 bug，是浏览器原生校验在起作用，但背后有三个关键点：
立即学习“前端免费学习笔记（深入）”；
- 用户手动输入
2.05，而step="0.1"要求所有合法值满足value === min + n × 0.1（n 为整数），2.05不符合，提交前就会触发validity.stepMismatch -
0.1在二进制浮点中无法精确表示，旧版 Chrome 曾静默四舍五入成step="1"，导致行为突变 -
value初始值必须与min和step对齐：比如min="1"、step="0.3"，却设value="1.0"，浏览器可能静默修正为1.2或让 spinner 失灵
更稳妥的做法：金额统一用“分”处理，step="1"、min="100"、value="100"，显示时再除以 100；或所有值统一小数位，如 min="0.00"、max="10.00"、step="0.01"。
动态修改 step 后 spinner 不动或跳变异常
DOM 属性更新后，浏览器不会自动重算合法值集合，旧 value 很可能已非法：
- 别直接
el.step = "0.5"，改用el.setAttribute("step", "0.5")，部分浏览器响应更稳定 - 改完立即调用
el.checkValidity()主动校验，配合el.reportValidity()显示提示 - 若需连续切换 step（比如从 0.01 切到 1），建议用
requestAnimationFrame延迟重置value，避免状态残留 - 实现 ± 按钮时，别用
parseFloat(val) + 0.25这类 JS 浮点运算——优先调用el.stepUp(1)和el.stepDown(1)，它们严格按当前step执行，不引入误差
step="any" 并不等于“不限制”，而是“不强制对齐步长”
step="any" 不会让表单失去校验能力，它只是放宽 validity.stepMismatch 的触发条件：
- 仍会检查是否为合法数字（比如不能输
abc），但不再要求必须是某个步长的整数倍 - 适合需要任意精度输入的场景：科学计算、地理坐标、自定义校验逻辑接管精度控制
- 注意陷阱：如果
value="3.14159"且step="0.01"，页面加载就会触发stepMismatch；但换成step="any"就不会，这是最常被忽略的初始化兼容问题
滑块（type="range"）的 step 仅影响拖动/方向键调节的“跳变点”，不提升渲染精度；设 step="0.001" 用户根本感知不到变化，这时候不如换用 number 输入框 + 按钮组合。
