HTML <input type="time"> 默认不支持自动填充当前时间，需用JavaScript在DOM加载后手动设置符合"HH:MM"格式的值，且仅初始化时执行一次，避免干扰用户输入。
HTML <input type="time"> 默认不支持自动填充时间
浏览器原生的 <input type="time"> 不会自动填入当前时间，哪怕加了 value 属性且留空，也不会触发“默认设为现在”。这是规范行为，不是 bug —— HTML 标准里明确要求该控件初始值必须为空字符串，除非显式设置。
用 JavaScript 在页面加载时写入当前时间
最直接可控的方式是用 JS 获取当前时间并赋值给 value。注意格式必须为 "HH:MM" 或 "HH:MM:SS"（24 小时制，两位数补零），否则输入框会变为空或回退到无效状态。
实操建议：
- 使用
new Date().toTimeString().slice(0,5)简单截取，但依赖本地时区且不保险（如秒数可能影响显示） - 更稳妥：用
String.prototype.padStart()手动拼接：const now = new Date(); const timeStr = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`; document.querySelector('input[type="time"]').value = timeStr; - 务必在 DOM 加载完成后执行（比如放在
DOMContentLoaded里），否则querySelector可能返回null - 如果页面有多个 time 输入框，需遍历或加 class 区分，避免误设
避免 input 事件监听导致的意外覆盖
用户手动修改时间后，若 JS 在每次 input 或 change 中又重写 value，就会打断操作、造成体验卡顿甚至死循环。
立即学习“前端免费学习笔记（深入）”；
关键判断点：
- 只在初始化阶段写一次，不要绑定到用户交互事件上
- 如果需要“点击后重置为当前时间”，应单独加按钮，而不是监听输入框自身
- 服务端渲染（如 SSR）场景下，JS 执行前 HTML 已输出，
value属性仍需留空或由 JS 覆盖，不能靠服务端写死（否则时区/客户端时间不准）
移动端兼容性与用户体验细节
Android Chrome 和 iOS Safari 都支持 type="time"，但原生时间选择器样式和行为差异大；自动填时间本身不影响唤起，但要注意：
- 部分旧版 WebView（如 Android 4.x）不支持该类型，会降级为文本框 —— 此时自动填时间仍生效，但失去校验和选择器
- 如果页面有表单自动保存/恢复逻辑（如
autocomplete="off"或框架缓存），可能覆盖 JS 设置的值 - 无障碍方面：屏幕阅读器能正确读出你写入的
value，但别用placeholder（type="time"不支持）
真正容易被忽略的是：时间格式严格区分 12/24 小时制，且不接受毫秒、时区偏移或中文字符 —— 任何不符合 HH:MM 的字符串都会让控件清空显示，连错误提示都没有。
