step属性仅对type为"number"、"range"、"date"、"datetime-local"、"month"、"time"或"week"的input生效；对text、email等类型无效，且各类型对step的支持和单位规则不同。
input 元素的 step 属性怎么写才生效
只有 type 为 "number"、"range"、"date"、"datetime-local"、"month"、"time" 或 "week" 的 input 才支持 step 属性。对 text 或 email 等类型设 step 完全无效。
常见错误是给 type="text" 加 step="0.1"，结果滑动或上下箭头没反应——浏览器直接忽略该属性。
-
step="any"允许任意精度输入（如小数位不限），但需配合type="number"和合理min/max - 省略
step时，number默认为1，range默认为1，time默认为60秒（即 1 分钟） - 若
value初始值不满足min + n × step规则（比如min="0" step="0.5" value="0.3"），部分浏览器会拒绝提交或自动修正值
number 输入框中 step 对键盘和鼠标操作的影响
step 不仅控制“点击上下箭头”时的增减量，也影响键盘按 ↑/↓ 时的变化步长，还约束了表单验证逻辑（checkValidity() 会检查是否符合步长规则）。
例如：<input type="number" min="0" max="10" step="0.25" value="1">
立即学习“前端免费学习笔记（深入）”；
- 点向上箭头 → 值变为
1.25，再点 →1.5，依此类推 - 手动输入
1.1后失焦，Chrome 会标红并提示“值必须为 0.25 的倍数”，reportValidity()返回false - 若想允许用户自由输入再校验（比如保留两位小数但不强制步长），应改用
type="text"+ JavaScript 校验，而非依赖step
range 滑块的 step 值为什么经常卡顿或跳变
range 类型对 step 更敏感：如果 min、max 和 step 三者无法构成整数个步长区间（即 (max - min) % step !== 0），滑块拖动时可能停不住、数值跳变，或最后一位无法精确抵达 max。
比如：<input type="range" min="0" max="10" step="3"> 实际只产生 0、3、6、9 四个有效值，10 永远无法选中。
- 安全做法：确保
(max - min)能被step整除，例如min="0" max="12" step="3" - 需要精细控制（如 0–100 之间每 0.1 一档）？优先考虑
step="0.1"，但注意浮点误差可能导致valueAsNumber返回类似12.300000000000001，建议用Math.round(value * 10) / 10截断 - 移动端滑动 range 时，
step过小（如0.01）会导致响应迟滞，建议视觉粒度与交互粒度分离：用较大step配合显示格式化（如显示"12.3%"，实际存12.3）
date/time 类型中 step 的单位容易误解
step 在日期时间类输入中单位不是“秒”或“天”，而是“以秒为单位的整数步长”，但仅对 datetime-local 和 time 有效；date、month、week 忽略 step（规范如此，非浏览器 bug）。
-
<input type="time" step="300">表示每步 5 分钟（300 秒），选择器会显示00:00、00:05、00:10… -
<input type="datetime-local" step="3600">表示每步 1 小时，用户无法选择分钟级精度 -
<input type="date" step="7">是无效的：date不支持step，浏览器会无视它
真正需要按周/月粒度选择，得用两个独立控件（如 month + range）或自定义日历组件——原生 step 在这里形同虚设。
