step属性仅对type="number"、"range"及部分日期时间类型生效，需与min/max配合使用；type="text"等完全忽略step；浮点精度问题会导致step校验失败，应优先采用整数单位或容差判断。
step 属性不是“设了就生效”的万能开关，它只在特定 type 下起作用，且必须和 min/max 搭配才能真正约束行为。单独写 step="0.1" 却不设 min，或给 type="text" 加 step，基本等于没写。
哪些 input type 支持 step 属性
只有 type="number" 和 type="range" 会解析并应用 step；type="date"、type="time"、type="datetime-local"、type="month"、type="week" 也支持，但行为受限（比如 type="time" 的 step="300" 表示 5 分钟一跳）。
以下类型完全忽略 step：type="text"、type="email"、type="tel"、type="color"、type="search"——DevTools 里能看到属性，但 spinner 不出现、校验不触发、拖动也不对齐。
常见错误：
- 用
type="text"+step="0.01"做金额输入 → 无效 - 给
type="range"只写step="10"却不设min和max→ 默认min="0"、max="100"，结果只能取 0,10,…,100，超出预期
step="1" 为什么不能保证用户只输整数
step="1" 只定义合法值集合为 min + n × 1（n 为整数），但它不拦截键盘输入。用户仍可手动敲入 4.2，表单也能通过 checkValidity()（除非你显式调用），提交时才报 stepMismatch。
要真正限制整数输入，必须配合 JS：
- 监听
input事件，用Math.round(parseFloat(e.target.value))截断小数 - 避免只监听
change，它无法覆盖实时输入场景 - 注意：直接赋值
e.target.value = Math.round(v)后，焦点可能丢失或光标跳到末尾，建议加e.target.setSelectionRange()修复
更稳妥的做法是 HTML + JS 双保险： + 实时 input 校验。
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
小数步进（如 step="0.1"）为什么总校验失败
根本原因是浮点精度问题：0.1 + 0.2 在 JS 中不等于 0.3，而是 0.30000000000000004。浏览器内部做 (value - min) % step === 0 判断时，极易因二进制表示误差失败。
推荐解法：
- 用整数单位替代小数：金额存“分”，写
min="0" max="10000" step="1"，显示时除以 100 - JS 校验改用容差判断：
Math.abs(((value - min) / step) % 1) - 动态设置 value 时先对齐：
input.value = (Math.round(parseFloat(input.value) / 0.1) * 0.1).toFixed(1) - 避免
step小于0.01，旧版 Safari 对超细粒度支持不稳定
别依赖浏览器自动修正——有些浏览器静默四舍五入，有些直接清空，行为不一致。
动态修改 step 后 value 不对齐怎么办
直接改 el.step = "0.5" 不可靠。浏览器不会重算合法值集合，旧 value 很可能已越界，导致 spinner 卡顿、拖动跳变、checkValidity() 返回 false 却无提示。
正确做法：
- 用
el.setAttribute("step", "0.5")替代直接赋值，部分浏览器响应更稳定 - 紧跟着重置
value：el.value = (Math.round(parseFloat(el.value) / 0.5) * 0.5).toFixed(1) - 连续切换
step时，用requestAnimationFrame延迟执行重置，避免状态残留 - 改完立刻调用
el.checkValidity()，必要时el.reportValidity()主动提示用户
最常被忽略的一点：浏览器对 step 的解析依赖三者关系——min、max、step 必须能构成完整等差数列。比如 min="1"、max="10"、step="2"，最大合法值其实是 9，不是 10。调试时不妨打印真实刻度点验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
