step属性仅对number/range/date等类型生效，type为text时被忽略；value不满足min+n×step规则时浏览器可能自动修正；重置需用step="any"而非移除，且仅number类型有效。
step属性被忽略的常见原因
HTML input 元素的 step 属性只对 type="number"、type="range"、type="date" 等支持步进的类型生效；如果设为 type="text" 或未指定合法类型，浏览器会直接忽略 step，连控制台都不会报错。另外，当 value 初始值不满足 min + n × step 规则时（比如 min="0" step="0.1" value="0.15"），部分浏览器（如 Chrome）会在用户交互后自动“修正”值，造成行为不可预期。
重置step的正确做法是显式覆盖而非移除
step 没有“无值”或“继承默认”的概念——不写它，浏览器按类型使用内置默认值（例如 number 默认为 1）；设为 step="" 或 step="any" 是无效的字符串，会被当作 1 处理。真正重置为“无约束步进”，必须用 step="any"，但仅对 type="number" 有效，且需配合 min/max 显式声明数值范围，否则输入任意小数仍可能被截断。
实操建议：
- 想允许任意精度输入：用
，并确保 JS 不在input或change事件中强制四舍五入 - 想恢复浏览器默认步进（如整数）：显式写
step="1"，不要删掉属性——删除后某些旧版 Safari 仍会沿用上次渲染的缓存值 - 动态修改时用 JS：
el.step = "any"或el.setAttribute("step", "any")，避免用removeAttribute("step")
与JavaScript联动时的坑
直接改 step 属性不会触发重校验，已存在的 value 不会自动调整。例如一个 value="2.5"、step="1" 的输入框，改成 step="0.5" 后，值仍是 2.5（合法），但改成 step="0.3" 后，2.5 就变成非法值——此时调用 el.checkValidity() 返回 false，但浏览器未必高亮提示，需要手动处理。
常见错误场景：
- 用户输入
1.234后，JS 把step改成"0.01"，但没同步修正value→ 表单提交时校验失败 - 用
el.valueAsNumber读值，却在step="any"下得到NaN（因为非数字字符串无法转）→ 应改用parseFloat(el.value) - Vue/React 中绑定
v-model或valueprop 后，直接改step属性不触发视图更新 → 需同步更新组件状态或用key强制重渲染
兼容性与移动端特殊表现
Android WebView 和 iOS Safari 对 step="any" 支持不一致：iOS 15+ 才完全支持小数键盘唤起，旧版本即使写了 step="any" 也只显示整数键盘；部分安卓厂商定制浏览器会忽略 step 直接走系统默认逻辑。
稳妥方案：
- 移动端优先考虑用
type="text"+inputmode="decimal"（更可控）+ JS 校验，放弃step的原生约束 - 若必须用
number，加oninput="this.value = this.value.replace(/[^0-9.]/g, '')"做基础过滤，再配合step="any"防止 submit 时拦截 - 测试时务必真机验证，模拟器常掩盖键盘类型切换问题
最易被忽略的一点：form 提交前，step 校验只检查当前 value 字符串是否符合规则，不关心它是否由 JS 动态写入——所以用 el.value = "1.234" 赋值后，即使 DOM 上 step="0.01"，只要字符串能被解析为合法数值，就不会阻断提交。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
