HTML原生<input type="time">无法跨浏览器强制显示24小时制，其格式由系统区域设置决定；旧版Safari等会降级为text，且value必须严格为“HH:mm”格式，否则静默清空；可靠替代方案是受控文本输入配合正则验证或flatpickr等自定义组件。
input[type="time"] 在旧版 Safari、部分安卓 WebView 和 iOS 14.4 及更早系统中会直接降级为 type="text"，且无法强制统一显示为 24 小时制——这不是 bug，是浏览器对本地习惯的尊重，也是 W3C 明确不支持干预的行为。
检测 time 输入框是否真被支持
仅检查 "time" in document.createElement("input").type 是错的：旧版 Safari 会返回 true，但渲染后仍是文本框。必须双重验证：
- 创建临时元素，设
el.type = "time"，再确认el.type === "time" - 调用
getComputedStyle(el).appearance，若返回"textfield"或空字符串，说明已降级 - 可封装成函数：
function isTimeTrulySupported() { const el = document.createElement("input"); el.type = "time"; if (el.type !== "time") return false; const ap = getComputedStyle(el).appearance; return ap && !ap.includes("textfield"); }
time 输入框值格式错误导致静默清空
input[type="time"] 的 value 必须严格为 HH:mm（24 小时制，两位小时+两位分钟，冒号分隔），任何偏差都会让浏览器直接清空输入框：
- ❌
"9:30"（小时未补零）→ 清空 - ❌
"14:30:00"（含秒）→ 清空（除非显式设step="1"） - ❌
"14:30 PM"（12 小时制写法）→ 清空 - ✅
"14:30"（唯一安全格式） - 生成安全值推荐：
date.toTimeString().slice(0,5)或手动拼接：${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}
兼容性差时该用什么替代方案
不要指望 polyfill 能“修复”原生控件，而是主动接管输入逻辑：
立即学习“前端免费学习笔记（深入）”；
- 轻量首选：
input[type="text"]+inputmode="numeric"+pattern="[0-2][0-9]:[0-5][0-9]"，配合实时格式化（如输入135自动转为"13:05"） - 需要弹出选择器：flatpickr（配
enableTime: true, noCalendar: true, time_24hr: true），它不依赖原生控件，行为跨浏览器一致 - 避免 jQuery UI Timepicker：已多年未更新，移动端支持差，且默认输出格式不可控
- 注意：所有替代方案都必须同步处理
min/max逻辑（原生time的这些属性在降级后完全失效）
真正难的不是让时间能输进去，而是确保所有路径（用户手输、JS 赋值、表单提交、服务端接收）都只认 HH:mm 这一种格式，并在任意环节出错时能立刻感知——浏览器不会报错，它只会默默清空。
