step 属性仅对 type="range" 和 type="number" 有效，但行为不同：range 控制滑块离散位置，number 用于校验和箭头步进；step="any" 允许任意浮点输入但不解除 min/max 限制，且需 parsefloat() 获取精确值。
step 属性只对 type="range" 有效，其他 input 类型忽略它
很多人给 type="number" 或 type="date" 加 step 却发现没反应，其实浏览器只在 type="range" 和 type="number" 中真正启用该属性——但行为完全不同：range 用它控制滑块可停靠的离散位置，number 则用于校验和上下箭头步进。如果你要的是视觉上“一格一格滑”的效果，必须用 range。
step 值为 any 时会禁用步进约束，但不等于“自由滑动”
设 step="any" 确实允许用户输入任意浮点值（比如拖到 3.14159），但注意两点：
- 它不会改变
input元素的默认行为——浏览器仍可能四舍五入显示（尤其在移动端键盘弹出时） - 提交或读取
value时，你拿到的仍是字符串，需用parseFloat()才能获得真实数值 - 若同时设置了
min、max，step="any"不解除它们的边界限制
整数步进 vs 小数步进：精度陷阱和兼容性差异
写 step="0.1" 看似合理，但 JavaScript 浮点运算误差会让某些刻度“不可达”，例如：min="0" max="1" step="0.1" 理论上有 11 个点，但实际 value 可能出现 "0.30000000000000004"。更稳妥的做法是：
- 用整数缩放：设
min="0" max="100" step="1"，再在 JS 中除以 10 显示为 0.0–10.0 - 避免
step小于0.01，部分旧版 Safari 对小数步进支持不稳定 - 不要依赖
step实现高精度控制逻辑，始终用 JS 校验并规整最终值
配合 JS 获取精确值时，别直接读 input.value
input.value 返回字符串，且受浏览器 UI 渲染影响（比如四舍五入显示为 "2.3"，实际内部值可能是 "2.2999999999999998"）。正确做法是：
- 监听
input事件，用parseFloat(e.target.value)转换 - 必要时做规整：
Math.round(val / step) * step（注意处理负数） - 如果需要响应式更新其他 UI，建议加
requestAnimationFrame节流，避免高频触发重绘
最常被忽略的一点：step 的实际生效依赖于 min/max 与 step 三者能构成等差数列。比如 min="1" max="10" step="2"，最大可选值其实是 9，不是 10——因为 1 + n×2 = 10 无整数解。调试时不妨打印 Array.from({length: 10}, (_, i) => min + i * step) 看看真实刻度点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
