step属性仅对type="number"和type="range"生效，需与min、max显式配合；type="text"/"tel"等设step无效；初始value必须满足value=min+n×step，否则被浏览器静默修正；它不拦截非法输入，仅校验提交和控制箭头增减。
直接说结论：step 属性是唯一原生支持步进控制的机制，但它只在 type="number" 和 type="range" 上生效，且必须与 min、max 显式配合，否则行为不可靠甚至被浏览器静默修正。
step 属性只对 number 和 range 生效，text/tel 等类型设了也白设
很多人给 type="text" 加 step="0.1"，发现箭头不出现、输入也不校验——这完全正常。step 是语义化属性，浏览器只在明确声明数字语义时才解析它。哪怕你输的全是数字，只要没写 type="number"，step 就被忽略，连控制台警告都不会有。
常见错误现象：
-
：无任何步进行为，也无法触发原生校验 -
：键盘仍是数字键盘，但箭头不显示，valueAsNumber返回NaN
正确做法只有两个：
- 要步进+校验 → 用
type="number"，显式写min、max、step - 要自由输入+自定义格式（如带千分位、前缀）→ 改用
type="text"+inputmode="decimal"+ JS 校验，别碰step
min/max/step 必须数值对齐，否则初始 value 会被浏览器悄悄改掉
浏览器不会校验你写的 value 是否合法，但会在渲染时静默修正它。如果 value 不满足 value === min + n × step（n 为整数），Chrome/Safari 可能直接把它拉到最近合法值，导致第一次点 ↑ 就跳变、拖拽卡顿、甚至 spinner 失灵。
错误写法：
<input type="number" min="0" step="0.1" value="1.05">
正确写法（确保初始值本身就是步长整数倍）：
<input type="number" min="0" step="0.1" value="1.0">
或
<input type="number" min="0" step="0.1" value="1.1">
金额类场景更推荐换算单位避免浮点误差：
- 不要写
min="0" max="100" step="0.01" - 改写成
min="0" max="10000" step="1" value="199"，表示 1.99 元
用户仍可手动输入非法值，step 不拦截，只校验提交
step 不是输入过滤器。用户可以粘贴 2.156、键盘敲 3.789，浏览器不会实时截断或四舍五入。它只做两件事：
- 点击上下箭头时，按
step增减 - 表单提交时，检查是否符合
min + n × step，不符合则触发validity.stepMismatch并高亮
所以仅靠 step 不够，必须补充 JS：
- 监听
input事件，用正则（如/^\d+(\.\d{0,2})?$/）实时过滤 - 监听
change或提交前调用checkValidity()，必要时reportValidity() - 对浮点计算做容错：判断
Math.abs(((value - min) / step) % 1) ，而非直接用%
range 滑块必须配 output + input 事件，change 会漏掉拖拽过程
默认不显示数值，step 控制的是合法刻度点，不是视觉滑动粒度。用户拖拽时，值在松手前就已变化，但 change 只在松手后触发一次，中间过程不可见。
正确组合：
- 加
，让浏览器自动同步显示（for必须严格匹配id） - 监听
input事件（不是change），确保拖拽、键盘方向键全程响应 - 读取值时优先用
event.target.valueAsNumber，避免重复parseFloat()
例如：
<input type="range" id="price" min="0" max="1000" step="10"><br><output for="price">0</output>
JS 中：
document.getElementById('price').addEventListener('input', e => {<br> const val = e.target.valueAsNumber;<br> // 同步更新其他 UI，或做业务逻辑<br>});
最常被忽略的是：移动端 iOS Safari 的 number 键盘不一定显示小数点，step="0.1" 可能让用户根本输不了小数；而动态修改 step 后不重置 value，会导致滑块拖不动或松手跳变——这些都不是 bug，是 step 机制本身的约束边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
