浏览器自动填充依赖autocomplete值严格匹配whatwg规范，写错大小写、连字符或语义即失效；需字段初始存在于dom、包裹在内、type/name/label协同完整。
浏览器自动填充不是靠加个 autocomplete 就能“开/关”的功能，而是依赖你写的值是否精准匹配 WHATWG 规范——写错一个连字符、大小写、或语义偏差，Chrome 和 Safari 都会直接跳过该字段，不填、不提示、也不报错。
autocomplete 值必须严格按 WHATWG 规范写，不能凭经验猜
浏览器只认标准 token，拼写、大小写、连字符全错不得。常见字段对应关系如下：
-
given-name和family-name有效；first-name、lastname、name（模糊值）在 Safari 中基本失效 -
email有效；Email、user-email、mail全部被忽略 -
tel可识别；phone、mobile、telephone不被支持 -
street-address有效；address、shipping-address、address-line1（注意是line1，不是line-1）才是合法拆分 -
postal-code有效；zip、postcode、pincode不触发填充 - 密码字段必须区分：
current-password（登录）、new-password（注册/改密），混用会导致填错或保存失败
type 和 autocomplete 必须协同，不能只靠其中一个
仅写 autocomplete="email" 但 type="text"，触发率远低于 type="email" + autocomplete="email"。Safari 尤其依赖 type 的语义强度。
-
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）→ 浏览器随机选一个填，行为不可控 - 字段被
display: none、visibility: hidden或opacity: 0隐藏 → 即使后续显示，Safari 仍拒绝填充
form 上的 autocomplete="off" 几乎没用，别再依赖它
<form autocomplete="off"></form> 不是全局开关，只是给未显式设 autocomplete 的子字段提供默认值；现代浏览器（Chrome ≥76、Edge ≥90、Safari ≥15.4）已基本无视它，尤其对 type="password" 或 type="email" 字段。
- 只要表单里存在
<input type="password" autocomplete="current-password">，整个form autocomplete="off"就被覆盖 - 写
autocomplete="false"或autocomplete="nope"属于无效 hack，部分 Chrome 版本放弃识别，Safari 仍可能尝试匹配 - 真正可控的方式只有两个：给需要填充的字段写准确语义值（如
shipping street-address）；对不想填的字段，用组合策略干扰识别（如动态name、type="search"、聚焦清空等） - 密码字段必须绕开
form级控制：登录页密码框必须显式写autocomplete="current-password"，否则 Chrome 可能把上一个注册页存的新密码塞进去
最常被忽略的点是：autocomplete 生效的前提不是“属性写了”，而是“字段在初始 DOM 中就存在、可见、可交互、且包裹在 <form></form> 内”。哪怕所有值都对，只要它是在 useEffect 里 append 进去的，或者初始 value="" 被 JS 主动设过，浏览器就可能认为“用户已操作”，从而跳过填充。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
