chrome/edge 中 自动填充无法用 autocomplete="off" 可靠禁用，需组合使用 autocomplete="nope"、动态 name 属性、domcontentloaded 后清空初始值，或语义降级为 type="text" 配合 inputmode 和 showpicker()。
Chrome 和 Edge 里 <input type="time"> 被自动填充怎么办
浏览器（尤其是 Chrome/Edge）会对 <input type="time"> 尝试填入用户最近使用过的时间，比如“09:00”，且不触发 change 事件，导致表单逻辑错乱或校验失效。这不是 bug，是它们把 type="time" 当作可记忆的表单字段处理了。
关键点：不能靠 autocomplete="off" 完全禁用——对 type="time" 多数版本无效；也不能简单加 readonly，否则 iOS 上无法唤起时间选择器。
-
autocomplete="nope"或autocomplete="new-password"在部分 Chrome 版本中更可靠（比off有效） - 配合
name属性动态化，比如加时间戳后缀：name="meeting_time_1715234892"，避免被识别为历史字段 - 如果允许 JS 控制，可在
DOMContentLoaded后清空初始值：input.value = ""，但注意别覆盖用户手输内容
为什么 autocomplete="off" 对时间输入框经常失效
W3C 规范允许浏览器忽略 autocomplete="off"，尤其对 type="time"、type="date" 这类语义化输入类型。Chrome 自 72+ 版本起明确将 type="time" 列入“高价值字段”，优先启用地址/时间/电话等自动填充策略。
实测发现：autocomplete="off" 在桌面 Chrome 中基本无效；在 Safari 和 Firefox 中可能起作用，但不可依赖。
- 真正起效的是非常规值，如
autocomplete="no-time-fill"（任意非标准字符串） - 必须同时设置
name和id，且二者不要含time、hour、minute等关键词，否则仍可能被启发式匹配 - 若该字段属于登录/注册流程，浏览器会更强力干预，建议彻底移出该上下文
有没有兼容性好又不破坏体验的绕过方案
纯 HTML 方案有限，推荐组合策略：语义降级 + JS 补位。即不用 type="time"，改用 type="text"，再通过 inputmode="numeric" 和 pattern="[0-9]{2}:[0-9]{2}" 引导输入，最后用 JS 绑定原生时间选择器（仅在支持设备上）。
这样既避开自动填充，又保留移动端友好性：
- iOS Safari 会为
inputmode="numeric"弹出数字键盘，配合pattern可触发格式提示 - 用
showPicker()方法（Chrome 109+、Edge 110+ 支持）手动唤起时间选择器：input.showPicker({type: "time"}) - 降级时 fallback 到
<select></select>或自研时间组件，避免裸文本输入
服务端校验和前端防抖要同步做
即使前端禁用了自动填充，用户仍可通过 DevTools 修改 DOM 或直接 POST 请求绕过。所以任何时间字段都必须在服务端验证格式和业务逻辑（例如：不能早于当前时间、不能跨日等）。
前端也别只信 input.value —— 自动填充可能发生在 DOM 加载后、JS 执行前，造成“值已存在但事件未触发”的静默状态：
- 在
DOMContentLoaded后立即检查input.value是否非空，再决定是否标记为“已填写” - 监听
input和change，但也要捕获focusin后的瞬间值变化（某些版本 Chrome 会在聚焦时才注入值） - 对表单提交做二次确认，比如
if (input.value && !isValidTime(input.value)) { ... }
自动填充的时机不可控，最稳妥的做法是：不假设初始值为空，也不信任首次读取的值是否真实来自用户操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
