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" 的校验非常严格：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 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 才管值合规，而降级策略决定用户在旧设备上是否还能用。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！