step属性仅对type="number"和type="range"有效,其合法值由min+n×step严格生成,浮点精度问题易致stepmismatch,金额类建议换算单位规避。

step 属性只对 type="number" 和 type="range" 生效
给 type="text" 或 type="tel" 加 step="0.1" 完全没用,浏览器直接忽略,控制台也不会报错。它不是通用输入限制器,而是专为数值型控件设计的数学约束参数。
常见误用场景:
- 想限制折扣输入为两位小数,却用了
type="text" step="0.01"→ 无效 - 移动端弹出数字键盘但输不了小数点,原因是
type="number"未配step或step="1"→ 键盘默认不显示小数点
正确起点永远是:<input type="number" step="0.01"> 或 <input type="range" step="5">。
合法值由 min + n × step 严格生成
step 不是从当前值出发加减,而是从 min(或 0)开始,按固定公差生成等差数列。比如 min="0.5" step="0.25",合法值就是 0.5, 0.75, 1.0, 1.25, ...,而不是“用户输多少就从那开始跳”。
关键细节:
- 若未设
min,起点默认为0,不是 placeholder 值或初始value -
value初始值必须落在该序列里,否则 Chrome/Safari 会静默修正(如value="1.05"在step="0.1"下可能被改成"1.0"或"1.1") - 表单提交时校验的是“是否属于该序列”,不是“是否与上一次值相差 step”
浮点精度问题会让 step="0.1" 失效
0.1 在 IEEE 754 二进制中无法精确表示,导致计算残留如 0.30000000000000004。浏览器校验时会判定它不属于 min + n × 0.1 序列,触发 validity.stepMismatch。
更现实的问题:
- 旧版 Chrome 可能把
step="0.1"静默降级为step="1",箭头点击直接跳整数 - 用户粘贴
"0.4"后失焦,浏览器自动跳回0.3(因0.4实际存储为0.39999999999999997) - 金额类输入强烈建议换算单位:用
min="100" step="1" value="199"表示 1.99 元,彻底避开浮点
若必须用小数,统一写满位数:min="0.00" max="10.00" step="0.01",比 min="0" step="0.01" 更稳定。
动态修改 step 后必须重置 value
直接执行 input.step = "0.25" 或 input.setAttribute("step", "0.25") 不够。旧 value 很可能已不在新序列中,导致滑块拖不动、方向键失灵、点击 ↑ 跳到意外值。
安全做法是两步走:
- 先更新
step:input.setAttribute("step", "0.25") - 再规整
value:input.value = (Math.round(parseFloat(input.value) / 0.25) * 0.25).toFixed(2)
如果连续切换 step,加 requestAnimationFrame 延迟重置,避免状态冲突。改完立刻调用 input.checkValidity(),必要时 input.reportValidity() 主动提示用户。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











