autocomplete属性不是开关而是语义标签，必须严格匹配whatwg规范关键词（如given-name、email、tel），写错大小写、连字符或语义偏差即被chrome/safari忽略；字段须初始存在于dom、包裹在form内、且type/name/autocomplete协同一致。
autocomplete 值必须严格匹配 WHATWG 规范关键词
浏览器只认标准定义的字符串，写错一个连字符、大小写或语义偏差，Chrome 和 Safari 都会直接跳过填充。比如 given-name 有效，firstname 或 GivenName 无效；email 有效，Email 或 user-email 无效。
常见字段对应关系必须按规范来：
-
name是无效值 —— 必须拆成given-name和family-name -
tel可用，phone不被识别；中文场景下tel比telephone更可靠 -
street-address有效，address或shipping-address无效 -
postal-code在国内基本不触发，因浏览器极少保存中国邮政编码 - 密码字段必须成对：
current-password+username或email（登录页）；new-password+email或username（注册/改密页）
表单结构与 DOM 时机决定填充是否生效
autocomplete 生效的前提是字段在页面加载初期就存在于 DOM 中、可见、可交互，并包裹在 <form></form> 内。动态渲染或隐藏会导致浏览器错过发现时机。
典型失效场景包括：
- 用 React 的
{show && <input>}或 Vue 的v-if条件渲染 input —— 字段挂载晚于浏览器扫描阶段 - input 被
display: none或visibility: hidden隐藏，即使后续显示，Safari 仍跳过 - 表单未包裹在
<form></form>标签中，或action属性为空/缺失，浏览器认为无提交上下文 - JS 在
onload后立即执行input.value = ''，中断了浏览器自动填充流程 - 同一页面多个字段共用相同
autocomplete值（如两个tel），浏览器随机选一个填充，行为不可控
框架中 autocomplete 失效的底层原因与绕过方式
React/Vue 的响应式绑定容易覆盖原生自动填充行为，关键不在“有没有写 autocomplete”，而在“它是否在字段挂载时就生效”。
具体应对方式：
- React 受控组件中，若只写
value={state}却没配onChange，字段变成只读，浏览器跳过填充；想保留自动填充又不想立刻同步 state，改用defaultValue替代value（仅限首次渲染） - Vue 的
v-model若初始 data 字段为undefined或空字符串，某些 Chrome 版本会忽略自动填充；建议初始化为null - SSR 渲染时，服务端 HTML 必须包含完整
autocomplete属性，不能依赖客户端 JS 补充 - 多步骤表单切换时，确保每步的
name和autocomplete值保持一致，否则浏览器视为新字段
type、name、label 三者协同才构成完整语义链
autocomplete 不是孤立起作用的。浏览器（尤其是 Safari 和 Firefox）会综合 autocomplete、type、name 和 label 判断字段用途。只写 autocomplete="email" 但 name="user_mail_field" 或 type="text"，可能被降级处理甚至忽略。
安全且兼容的做法：
-
type="email"+autocomplete="email"+name="email"+<label>邮箱</label> - 地址字段必须结构化：
<input type="text" autocomplete="address-line1">、<input type="text" autocomplete="address-level2">，而非一个大<textarea autocomplete="street-address"></textarea> - 银行卡字段需组合使用：
autocomplete="cc-number"、autocomplete="cc-exp"、autocomplete="cc-csc"，且type="tel"对cc-number无意义，应保持type="text" - 避免
autocomplete="off"—— Chrome 会忽略，Safari 16+ 却当真；真正需要禁用时，密码字段用autocomplete="new-password"更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
