autocomplete属性值必须为whatwg规范定义的标准关键词（如name、email、tel、given-name、current-password），写错或自定义（如user_name、autocomplete-name）会被浏览器直接忽略，导致无下拉建议、钥匙图标不显示、已保存信息不出现。
autocomplete属性值写错导致浏览器完全忽略补全
浏览器只认标准的 autocomplete 属性值，比如 name、email、tel，而不是自定义的 autocomplete-name。这个写法根本不存在——HTML 规范里没有 autocomplete-name 这个属性，写了等于没写，表单字段不会被识别为“姓名”字段，也不会触发自动填充。
常见错误现象：
– 输入框聚焦后无下拉建议
– 浏览器地址栏旁不显示钥匙图标
– 已保存的姓名信息从不出现
- 必须用标准值：
autocomplete="name"（全名）、autocomplete="given-name"（名）、autocomplete="family-name"（姓） - 不能拼错：比如
autocomplete="firstname"或autocomplete="Name"都无效（大小写敏感，且非标准） - 搭配
name属性一起用更稳妥，例如：<input name="full_name" autocomplete="name">
input type和autocomplete值不匹配导致补全失败
浏览器会综合 type 和 autocomplete 做语义判断。比如 type="email" 却设 autocomplete="tel"，Chrome 会优先信任 type，忽略 autocomplete 的提示，最终按邮箱逻辑处理，不触发电话补全。
使用场景举例：注册页需要填手机号，但用了 type="text" + autocomplete="tel" —— 补全可能生效；换成 type="number" 就大概率失效（部分浏览器认为 number 类型不适合存电话字符串）。
-
type="tel"+autocomplete="tel"✅ 最可靠 -
type="text"+autocomplete="tel"⚠️ 多数浏览器支持，但 iOS Safari 有时跳过 -
type="number"+autocomplete="tel"❌ 不推荐，数字键盘+自动补全冲突 - 密码字段必须用
type="password"，autocomplete="current-password"或"new-password"才有效
label缺失或for绑定错误让补全识别率大幅下降
浏览器依赖可访问性线索推断字段用途。没有 <label></label>，或 label[for] 指向错误的 id，会导致即使 autocomplete 值正确，补全概率也明显降低——尤其在 Safari 和旧版 Edge 中。
容易踩的坑：
– 动态生成的 input 忘记同步设置 id 和 label[for]
– 复制粘贴代码时 id 重复，导致多个 label 绑定到同一个 input
- 每个
<input>必须有唯一id，且对应<label for="xxx"></label> - label 文本内容要有语义，比如写“手机号”比“请输入”更利于识别
- 避免仅靠 placeholder 推断字段类型：浏览器基本不读取
placeholder做补全决策
动态渲染表单后autocomplete失效的修复方法
React/Vue/Angular 等框架中，input 元素挂载后才设置 autocomplete 属性（比如通过 state 或 ref 修改），浏览器往往已错过初始化扫描时机，补全功能就“失活”了。
性能影响不大，但体验断层明显：用户刷新页面能补全，点击按钮切换表单后就不能补全了。
- 确保
autocomplete是初始 HTML 的一部分，而非后续 JS 设置（如el.setAttribute('autocomplete', 'email')） - React 中用原生属性写法：
<input autocomplete="email">（注意是autoComplete，不是autocomplete） - Vue 中避免
v-bind:autocomplete异步绑定；优先在模板中静态写出值 - 实在要动态控制，可尝试在元素插入 DOM 后触发一次
blur()+focus()，部分浏览器会重新触发补全探测
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
