Safari 不支持 <input type="time">，需降级为双 select 或第三方库，并手动校验格式、补零、处理 step 限制及软键盘兼容性。
time 输入框在 Chrome 和 Edge 中能直接用，但 Safari 不支持
HTML 的 <input type="time"> 在桌面端 Chrome、Edge、Firefox 都可用，但 Safari（包括 macOS 和 iOS）至今未实现该类型——用户看到的只是普通文本框，无法唤起时间选择器。这不是 bug，是规范未落地。如果你的页面主要面向 iOS 用户，得立刻准备降级方案。
常见错误现象：input[type="time"] 在 Safari 中失去语义、无键盘优化、无法校验格式（如输入 "25:00" 也不会报错）。不要依赖 valueAsNumber 或 step 属性做逻辑判断，它们在 Safari 下返回 NaN 或被忽略。
- 必须检测浏览器支持：用
"time" in document.createElement("input").type判断 - 不支持时，用两个
<select>（小时/分钟）或第三方库（如 flatpickr）替代 - 提交前手动校验格式：正则
/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/比依赖原生校验更可靠
设置 step="300" 可限制为 5 分钟粒度，但部分安卓浏览器会忽略
step 属性本意是控制可选时间间隔（单位为秒），设 step="300" 表示只允许选择 :00、:05、:10… 这类时刻。但它在 Android Chrome 上表现不稳定：有些版本仍允许手动输入任意时间；有些则将滑动选择器卡死在步长点，但点击“现在”按钮却返回未对齐的时间。
使用场景：预约系统常需限制为 15 分或 30 分钟一档。这时不能只靠 step，还得在提交时二次校验：
立即学习“前端免费学习笔记（深入）”；
- 获取
input.value后解析为分钟数：const mins = parseInt(h) * 60 + parseInt(m) - 检查
mins % 5 === 0（对应step="300"） - 若不满足，自动向下取整并格式化回
"HH:MM"，再赋值给input.value
value 必须是 24 小时制且带前导零，否则会被清空
<input type="time" value="9:30"> 在多数浏览器中会直接变为空值，因为规范要求格式必须为 HH:MM（如 "09:30"）。漏掉前导零不是显示问题，而是解析失败——DOM 中 input.value 会变成空字符串，input.valueAsDate 为 null。
容易踩的坑：
- 后端返回时间字段（如
"9:30"或"9:30:00"）时，前端必须补零再塞进value - 用
new Date().toTimeString().slice(0,5)获取当前时间会得到"09:30"，但new Date().getHours()返回数字，拼接时别忘了.toString().padStart(2, "0") - 表单重置（
form.reset()）后，value丢失前导零会导致控件重置失败，建议初始化时就确保格式正确
移动端软键盘行为不可控，别指望它总弹出数字键盘
虽然 type="time" 理论上应触发时间键盘，但 Android 厂商定制 ROM（如小米、华为）常将其降级为默认键盘，iOS 更是连时间键盘入口都没有。用户可能直接手输，也可能复制粘贴带空格或中文冒号的时间（如 "下午 3:30"）。
实操建议：
- 绑定
input事件，用正则实时过滤非法字符：event.target.value = event.target.value.replace(/[^0-9:]/g, "") - 监听
blur，对模糊后的值做标准化：去除空格、替换全角冒号、补前导零、截断多余字符 - 不要禁用粘贴（
onpaste），而是劫持后清洗内容，否则无障碍用户无法操作
最麻烦的其实是时区——<input type="time"> 永远按本地时区解析，没有 UTC 支持。如果业务涉及跨时区调度，时间值必须和 date 拆开存，或统一转成 ISO 时间字符串后端处理。
