step 属性仅对 type="number"、"range"、"date"、"month"、"week"、"time"、"datetime-local" 有效；type="text" 完全忽略它；step="any" 允许该类型下所有合法精度值，不等于关闭校验；min/max 与 step 共同决定可提交值，需满足等差关系；移动端需配合 inputmode="decimal" 才能唤出带小数点键盘。
step 属性只对特定 type 生效，不是所有 <input> 都能用
很多人加了 step="0.1" 却发现输入框依然只接受整数，根本原因是：只有 type="number"、type="range"、type="date"、type="month"、type="week"、type="time" 和 type="datetime-local" 这几类才支持 step。最常被误用的是 type="text" —— 它完全忽略 step，连控制台都不会报错。
实操建议：
- 确认
type值是否在上述支持列表中； - 若需小数输入，必须用
type="number"，不能靠 JS 模拟或留空type； -
type="range"的step会影响滑块可停靠的刻度点，但不会限制用户通过键盘输入任意值（这点常被忽略）。
step="any" 不等于“不限制”，而是交由浏览器按类型自动解析
step="any" 常被理解为“关闭步进校验”，但它的真实作用是：允许该类型下所有合法精度的值。比如 type="number" 下，step="any" 允许输入 3.1415926，而 step="1" 会拒绝非整数（Chrome 中会高亮边框并阻止表单提交）。
注意几个关键行为：
- 不设
step时，type="number"默认等价于step="1"； -
step="any"不影响min/max边界校验，超出仍会报错； - Safari 对
step="any"的兼容性略差，某些版本下仍会截断小数位（建议搭配inputmode="decimal"提升软键盘体验）。
step 与 min/max 组合时，边界值未必可选中
浏览器会基于 min、max 和 step 推导出一组合法值序列，但最终可选值取决于三者能否构成等差数列。例如：
<input type="number" min="1" max="10" step="3">
生成的合法值是 1、4、7、10 —— 因为 1 + 3×n ≤ 10。但如果写成 min="1" max="9" step="3"，10 被排除，最大合法值就是 7，9 本身不可提交（即使用户手动输入，提交时会触发约束验证）。
容易踩的坑：
- 不要假设
max一定可选，检查它是否满足(max − min) % step === 0； - 用
value设置初始值时，确保该值落在合法序列内，否则 Chrome 会静默重置为min或最近合法值； - 服务端永远要二次校验，因为前端约束可被绕过（如禁用 JS 后直接修改 HTML）。
移动端软键盘适配比 desktop 更依赖 step 和 inputmode
Android 和 iOS 在 type="number" 下会调出数字键盘，但默认不显示小数点。此时仅靠 step="0.1" 不够，必须显式声明 inputmode="decimal" 才能唤出带小数点的键盘（iOS 16.4+、Android Chrome 100+ 支持）。
实操组合推荐：
- 金额输入：
<input type="number" inputmode="decimal" step="0.01" min="0">； - 整数计数器：
<input type="number" inputmode="numeric" step="1" min="0">（inputmode="numeric"防止 iOS 弹出字母键盘）； - 避免混用
pattern和step，前者是正则校验，后者是数值步进，冲突时以step的数值校验为准（且更严格）。
step 的实现细节差异不小，尤其是边界值判定和错误提示时机。如果业务强依赖精确步进（比如金融场景），别只靠原生属性，得用 input 事件 + parseFloat + 取模校验兜底。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
