step属性在<input type="time">中仅控制原生选择器的可选时间粒度（单位为秒），不影响手动输入校验或格式限制；合法值须为≥60的正整数，如step="1800"表示半小时间隔。
step属性在里到底控制什么
step 在 <input type="time"> 中只影响用户可选的时间粒度，不校验输入、不改变显示格式、也不限制手动输入值——它只是告诉浏览器“建议按这个间隔生成时间选项”。比如设 step="300"（5分钟），原生时间选择器的滚动列表或点击箭头会以 5 分钟为单位跳转（09:00 → 09:05 → 09:10…），但用户仍可手动输入 09:07 并提交。
合法的step值怎么写才有效
必须是正整数，单位是**秒**，且不能小于 60（即最小粒度为 1 分钟）。常见错误包括：
- 写成
step="5"：浏览器会忽略（太小，低于 60 秒） - 写成
step="1.5"或step="01:30"：无效，只接受整数秒 - 写成
step="3600"：合法，对应 1 小时，选择器只显示 :00 分刻度
推荐用法：step="300"（5 分）、step="600"（10 分）、step="1800"（30 分）、step="3600"（60 分）。
为什么设了step却没生效？几个关键原因
常见失效场景和对应检查点：
立即学习“前端免费学习笔记（深入）”；
- 浏览器兼容性：Safari 目前完全忽略
step（截至 iOS 17 / macOS Sonoma），仅 Chrome、Edge、Firefox 支持 - type 不匹配：用了
type="text"或type="datetime-local"，step对它们无意义 - value 值未对齐 step：比如
step="300"但value="09:07"，部分浏览器会自动四舍五入或清空，导致行为不一致 - 没配合
min/max：单独用step无法防止用户输入任意时间，必须加校验逻辑或后端兜底
真正管用的打卡时间约束，得靠组合手段
单靠 step 无法实现业务级打卡规范。实际要分三层：
- 前端提示层：用
step+min/max让选择器友好，例如<input type="time" step="300" min="08:30" max="18:00"> - 前端校验层：监听
change或blur，用 JS 检查new Date('1970-01-01T' + value).getTime() % 300000 === 0（300 秒 = 300000 毫秒） - 后端兜底层：永远以服务端解析为准，拒绝非 5 分钟整点的时间字符串（如
"09:07"）
别指望 step 自己扛住所有边界情况——它只是个 UI 提示开关，不是校验锁。
