step="3600"无法真正限制time输入为整点，因浏览器对step支持不一：Chrome忽略它，Safari/Firefox仅部分影响键盘操作，所有浏览器均允许手动输入任意时间；可靠方案需结合JS实时校验与提交前兜底。
time类型input的step属性对时间精度的实际影响
HTML <input type="time"> 的 step 属性**不能真正限定用户只选“整点”**，它控制的是可选时间粒度（秒数），但浏览器实现差异大，且不阻止手动输入或键盘微调。比如设 step="3600" 理论上代表1小时，但 Chrome 仍允许用上下键切换分钟，Safari 则可能直接忽略该值。
为什么step="3600"在多数浏览器里不生效
根据 HTML 标准，step 对 time 类型的含义是「以秒为单位的步长」，但规范未强制要求 UI 控件（如时间选择器弹窗）必须遵守它。实际中：
- Chrome：忽略
step，始终显示分钟级选择器 - Safari / Firefox：部分支持，但仅影响初始聚焦时的键盘上下键行为，不影响手动输入或点击选择
- 所有浏览器：用户仍可直接输入
14:30，不会被拦截或修正
真正能约束整点的可行方案
靠纯 HTML 属性做不到可靠限制，必须结合 JavaScript 校验与体验优化：
- 用
step="3600"作为辅助提示（语义层面表明意图），但不依赖它做控制 - 监听
input和change事件，用正则或Date解析校验：const timeInput = document.querySelector('input[type="time"]');<br>timeInput.addEventListener('change', () => {<br> const [h, m] = timeInput.value.split(':').map(Number);<br> if (m !== 0) {<br> timeInput.value = `${h}:00`;<br> }<br>}); - 若需更严格，可在表单提交时再次校验，避免绕过前端
- 注意：iOS Safari 的原生时间选择器不支持
step，且无法通过 JS 拦截其输入，只能靠提交前兜底
兼容性与体验取舍的关键点
用户看到的是一个时间输入框，但背后逻辑要分三层处理：UI 层（尽量引导）、交互层（实时修正）、提交层（强制校验）。最易被忽略的是 iOS 设备——它的时间选择器会绕过所有键盘事件监听，所以 input 事件可能根本不会触发，必须依赖 change 或表单级验证。
立即学习“前端免费学习笔记（深入）”；
