浏览器自动填充是依赖html结构、属性值、挂载时机三者严格匹配的弱信号系统；autocomplete值须符合whatwg标准，type与autocomplete需协同，动态渲染字段易失效，且需用户聚焦并提交过表单才生效。
浏览器自动填充不是加个 autocomplete 就能跑通的功能，而是对 HTML 结构、属性值、挂载时机三者都敏感的“弱信号系统”——写错一个连字符、晚挂载 100ms、少包一层 <form></form>，填充就静默失效。
autocomplete 值必须严格匹配 WHATWG 标准 token
Chrome、Safari、Edge 都只认规范里明确定义的字符串，大小写、连字符、语义偏差全算错。常见错误包括：
-
given-name有效；first-name、firstname、GivenName全部被忽略 -
street-address有效；address、shipping-address、address-line1（注意是line1，不是line-1）才合法 -
postal-code有效；zip、postcode、pincode不触发填充 - 密码字段必须区分：
current-password（登录）、new-password（注册/改密），混用会导致 Chrome 把旧密码塞进新密码框
type 和 autocomplete 必须协同，不能只靠其中一个
浏览器尤其依赖 type 的语义强度来判断字段用途。仅设 autocomplete="email" 但 type="text"，触发率远低于两者同时正确：
-
type="email"+autocomplete="email"→ 邮箱键盘 + 建议最稳定 -
type="tel"+autocomplete="tel"→ 手机号填充准确率明显更高 -
type="date"+autocomplete="bday"→ 才能唤起生日历史建议；type="text"即使值对也无效 -
type="number"+autocomplete="postal-code"→ Chrome 会禁用自动填充，必须用type="text"或type="tel" -
type="search"、type="url"、type="hidden"等类型不支持任何autocomplete值
动态渲染和框架中 autocomplete 失效的真正原因
浏览器在页面首次加载时扫描 DOM 并建立字段映射，后续 JS 插入的 <input> 很可能被跳过：
- React 中用
{show && <input>}或 Vue 中用v-if动态渲染 → 字段挂载时机晚于浏览器初始化阶段，填充失效 - 受控组件中只写
value={state}却没配onChange→ 字段变只读，浏览器跳过填充；应改用defaultValue - SSR 输出 HTML 时若
autocomplete属性由客户端 JS 补上 → 完全无效；服务端必须直出完整属性 - 同一页面多个字段共用相同
autocomplete值（如两个都写tel）→ 浏览器随机选一个填，行为不可控
form autocomplete="off" 是个伪开关，别信它
它只是给没显式设 autocomplete 的子 <input> 提供默认值，现代浏览器基本忽略它：
- 即使
<form autocomplete="off"></form>，只要存在<input type="password" autocomplete="current-password">，密码照样被填 - Chrome 76+ 对
type="email"或type="password"字段主动绕过form autocomplete="off" - 真正起作用的是每个
<input>上的autocomplete值，且必须是标准 token - 若真想禁用某字段，可用
autocomplete="off-123"（随机字符串），比"off"更可靠
最常被忽略的一点：浏览器只对用户「聚焦过」且表单「提交过至少一次」的字段记录并回填。没交过、没点过、没输过——再标准的写法也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
