step属性仅控制点击箭头或按键盘上下键时的时间增减单位(秒),不影响手动输入、不校验值、不改变选择器界面粒度;必须为正整数秒值,且兼容性差,不能用于表单验证。

time input 的 step 属性到底控制什么
step 在 <input type="time"> 中只影响用户通过点击上下箭头(或键盘上下键)调整时间时的最小变动单位,**不影响手动输入、不校验输入值、也不改变原生时间选择器的界面粒度**。比如设 step="300"(5分钟),用户点一次↑就加5分钟;但直接输 14:07 依然合法,浏览器不会拦。
step 值必须是秒数,且推荐用整数
规范要求 step 是正整数,单位为秒。常见错误是写成 step="5"(以为是5分钟)或 step="0.1"(毫秒级无意义)。实际应换算:
-
step="60"→ 每次增减 1 分钟 -
step="300"→ 每次增减 5 分钟 -
step="1800"→ 每次增减 30 分钟 -
step="3600"→ 每次增减 1 小时
非整数如 step="60.5" 会被浏览器忽略,回退到默认步长(通常为 1 秒)。
step=1 和 step=60 在行为上几乎没区别
虽然理论上 step="1" 允许秒级调节,但多数桌面浏览器(Chrome/Firefox)的时间输入框默认不显示秒字段,上下箭头操作仍以分钟为单位;只有在手动输入带秒的时间(如 14:30:22)后,step="1" 才可能让键盘上下键微调秒数。移动端更不可靠——iOS Safari 完全忽略 step,Android Chrome 表现也因版本而异。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记(深入)”;
所以:
– 不要依赖 step 实现精确时间约束
– 真需要限制可选时间点,用 JavaScript 校验 + 自定义下拉菜单更稳妥
兼容性差,别把它当表单验证用
step 对 type="time" 的支持本身就不统一:
- Chrome:支持,但仅作用于键盘/箭头交互
- Firefox:支持,行为类似 Chrome
- Safari(macOS/iOS):完全忽略
step - 旧版 Edge(EdgeHTML):不支持
更关键的是:step 不触发 checkValidity() 或表单提交拦截。哪怕用户输入了 14:07:13 而你设了 step="300",表单照样能提交成功。
真正要 enforce 时间粒度,得靠 JS 监听 input 或 change,把值 round 到最近的合法刻度,再设回 value —— 这步漏掉,step 就只是个摆设。


















