<input type="time"> 默认值必须为严格 HH:MM:SS 格式（如 "14:25:36"），缺秒或补零不全（如 "10:30" 或 "10:30:0"）均失效；需动态生成、校验格式、检查 min/max 范围，并注意跨浏览器兼容性。
HTML <input type="time"> 默认值必须带秒且格式严格
浏览器只认 HH:MM:SS 格式（24 小时制，两位数补零），写 "10:30" 或 "10:30:0" 都会被忽略，输入框显示为空。这是最常踩的坑——看着写了 value 却没生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
new Date().toTimeString().slice(0,8)动态生成当前时间（如"14:25:36"），注意toTimeString()返回含时区的字符串，slice(0,8)刚好截出前 8 位 - 服务端传值时确保后端输出为
"09:00:00"而非"9:00:00"，少一个零就失效 - 如果依赖用户初始选择，别硬设默认值，改用
placeholder提示（但注意：原生<input type="time">不支持placeholder，得用 CSS 模拟或换组件）
Vue/React 中绑定 v-model 或 value 仍需格式校验
框架不会自动修正时间格式。比如在 Vue 里写 v-model="form.time = '13:45'，渲染后输入框依然空——因为 DOM 层的 value 属性最终还是被设成了非法字符串。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 初始化数据时就标准化：用
String(new Date()).match(/\d{2}:\d{2}:\d{2}/)[0]或手写补零逻辑 - 在
@input或onChange回调中，对用户输入做防御性处理：检测到不合法值（如空、格式错）就重置为上一个有效值或清空 - 避免直接把
Date对象赋给value，必须转成字符串再截取
移动端 Safari 和旧版 Android 浏览器对 min/max + value 组合支持不稳定
比如设了 min="08:00:00" value="07:30:00"，Safari 可能直接禁用输入框或报错；某些 Android 原生浏览器会静默忽略 value。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设置
value前先检查是否在min/max范围内，超出则 fallback 到min或max - 不要依赖
min/max做业务校验，它们只是 UI 提示，后端必须重新验证 - 在 iOS 上测试时，优先用真机而非模拟器——模拟器的时间控件行为和真实设备差异较大
用 JavaScript 动态设置默认时间比 HTML 属性更可靠
直接在 <input> 标签里写 value="15:20:00" 看似简单，但遇到 JS 初始化、框架重渲染、表单 reset 等场景容易被覆盖或失效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 页面加载后用
document.querySelector('input[type="time"]').value = '15:20:00'显式赋值，确保时机可控 - 如果输入框是动态插入的（如模态框内），在插入 DOM 后再赋值，避免查不到节点
- 配合
required使用时，记得同步检查value是否为空字符串，否则提交时会触发原生提示却没显示默认值
