HTML time输入框的step属性单位严格为秒，设step="3600"可实现整点选择，但需配合value、min、max设为整点格式，并辅以JS校验和服务端验证，否则用户仍可输入非整点时间。
HTML time 输入框的 step 属性单位是秒，不是分钟
很多人写 step="60" 想实现“每分钟一档”，结果发现时间还是按秒跳（如 09:00:01、09:00:02）；更常见的是误写 step="1" 或 step="600"，导致行为完全不可控。根本原因是：step 对 type="time" 的单位**严格为秒**，且浏览器只在“原生选择器交互”中参考它——但不保证 UI 精确对齐。
想只允许整点（如 09:00、14:00），必须设 step="3600"
整点即每 60 分钟一个可选值，换算为秒就是 60 × 60 = 3600。所以正确写法是：
<input type="time" step="3600">
但这只是基础条件，还需配合以下几点才能真正起效：
-
value必须显式设为整点格式（如value="09:00"），否则某些浏览器可能默认显示"00:00"或随机初始值，且该值未必对齐step -
min和max也需设为整点（如min="08:00",max="18:00"），否则即使step正确，边界值仍可能错位 - 用户仍可手动输入非整点时间（如
"09:07"），step不阻止输入，仅影响点击/滚动选择逻辑和提交时的checkValidity()校验
Chrome/Firefox/Safari 都不渲染 step 限制的 UI 灰显效果
这是最常被忽略的实际限制：即便写了 step="3600"，原生日历或时间滚轮界面里，你依然能看到并能点选 09:01、09:15 等非整点值。浏览器只在表单提交时触发 "step mismatch" 错误（例如 Chrome 控制台报 The specified value does not conform to the required format），但不会禁用 UI 选项，也不会自动修正输入。
这意味着你必须额外做两件事：
- 监听
change或blur事件，用 JS 校验input.value是否符合HH:00格式，不符合就清空或重置 - 服务端必须再次校验，不能信任前端任何限制
真正可靠的整点限制方案是放弃原生 time 输入框
如果业务要求“用户根本看不到非整点选项”，原生 type="time" 就不适合。推荐两种落地方式：
- 用
列出所有合法整点选项：，完全可控，无兼容性问题 - 用轻量 JS 库（如 flatpickr）配置
minuteIncrement: 60，它会主动隐藏非整点分钟项，UI 层面真正过滤
原生 step 是提示性约束，不是强制过滤器。依赖它做关键业务逻辑，等于把校验权交给了浏览器实现细节——而这些细节在 iOS Safari 上长期缺失，在安卓 WebView 中也极不稳定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
