type="time"的step值必须为整数秒,如半小时需设step="1800";它仅控制交互跳变,不阻止手动输入非法时间,需JS校验并四舍五入到最近半小时,且value/min/max须严格匹配HH:MM格式,旧版Safari不支持,移动端兼容性差,应降级为select或使用flatpickr,后端必须二次校验。

type="time" 的 step 值必须是整数秒,不是分钟
想让时间输入框只允许选 09:00、09:30、10:00 这类半小时点,step 必须设为 1800(30 × 60 秒),写成 step="30" 或 step="00:30" 都无效——浏览器会静默忽略,退回到默认的 1 分钟步进。同理:step="900" 是 15 分钟,step="3600" 是 1 小时。
step 只控制交互增量,不阻止手动输入非法时间
step 属性仅影响用户用上下箭头、滚轮或滑块调节时的跳变点,对键盘手动输入完全无约束。你仍能输入 "09:17",提交前也不会报错。要真正拦截,必须加 JavaScript:
- 监听
change或blur事件 - 把
value拆成小时和分钟,算总分钟数 - 用
Math.round(totalMinutes / 30) * 30四舍五入到最近半小时,再转回"HH:MM"格式
value、min、max 的格式必须与 step 匹配
浏览器对 type="time" 的校验非常严格:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
- 若
step="1800"(半小时),value必须是"09:00"或"14:30"这种不含秒的"HH:MM"格式;写成"09:00:00"会被清空 -
min="09:00"合法,min="9:00"或min="09:0"会被忽略 - 旧版 Safari(≤15.4)根本不支持
step对type="time"的作用,检测要用document.createElement('input').type = 'time'看是否被降级为text
移动端和 Safari 兼容性差,别依赖原生控件
即使写了正确的 step="1800",iOS Safari 和部分 Android 原生键盘仍可能无视它,直接弹出全精度时间选择器。更稳妥的做法是:
立即学习“前端免费学习笔记(深入)”;
- 用
select下拉菜单列出所有合法时间点(如<option value="09:00">09:00</option>) - 或引入轻量库如
flatpickr,它能统一控制步进并屏蔽非法输入 - 后端永远要做二次校验——
step是体验优化,不是数据防线
实际生效的关键不在“怎么写”,而在“谁来兜底”:浏览器只管 UI 跳变,JS 才管值合规,而降级策略决定用户在旧设备上是否还能用。


















