必须用WHATWG规范定义的标准值（如given-name、email、tel）才有效；autocomplete="name"等非标准值会被浏览器忽略，且需字段初始可见、在form内、用户已提交过表单。
autocomplete 属性值怎么选才有效
浏览器只认标准的 autocomplete 值，乱写（比如 autocomplete="name" 或自定义字符串）基本没用，现代浏览器会直接忽略。必须用 WHATWG 规范里定义的关键词，比如 autocomplete="given-name"、autocomplete="email"、autocomplete="tel" 等。
常见误区是把 name 属性和 autocomplete 混为一谈——name 仅用于后端接收字段名，autocomplete 才决定浏览器是否触发自动填充逻辑。
-
autocomplete="off"在多数现代浏览器中已失效（尤其 Chrome 80+），即使写了，用户点击地址栏下拉项仍可能填充；真正禁用需配合autocomplete="new-password"（仅限密码字段）或动态生成随机name+ 移除autocomplete - 姓名类字段推荐拆开：
given-name（名）、family-name（姓），比笼统写name更可靠 - 地址字段优先用语义化值：
street-address、address-level2（城市）、postal-code，而非autocomplete="address"（无效）
为什么加了 autocomplete 还不弹提示
自动完成不是“加了就出”，它依赖多个条件同时满足：字段有合法 autocomplete 值、用户此前在该域名下提交过表单、字段处于可聚焦且未被 JS 动态禁用状态、没有被 autocomplete="off" 的父级 <form> 覆盖。
典型干扰场景：
- 表单用
display: none初始隐藏，再 JS 显示 —— 浏览器可能跳过解析该字段的autocomplete - 输入框绑定了
input事件并频繁重设value（如实时格式化手机号），导致浏览器无法稳定识别输入意图 - 同一页面存在多个同类型字段（如两个
autocomplete="email"），浏览器可能只对第一个生效 - Chrome 对非 HTTPS 页面限制部分自动填充功能（尤其是支付类字段）
密码字段的 autocomplete 特殊规则
密码字段行为和其他字段完全不同：浏览器不会主动弹出历史密码提示，而是在用户首次输入密码后，询问是否保存；下次进入时，会在密码框右侧显示钥匙图标，点击才填入。
关键配置要点：
- 登录页的密码输入框必须设
autocomplete="current-password"，否则 Chrome 可能拒绝触发保存提示 - 注册/修改密码页需成对出现：
autocomplete="new-password"（新密码） +autocomplete="new-password"（确认密码），不能一个写new-password一个写off - 绝对不要给密码字段设
autocomplete="off"—— Chrome 会将其解释为“请用随机密码生成器填入”，反而弹出密码建议 - 如果真要禁用密码自动填充（如 OTP 输入框），用
autocomplete="one-time-code"（WebAuthn 场景）或移除autocomplete属性本身
React/Vue 等框架中 autocomplete 失效怎么办
框架常因虚拟 DOM 渲染时机或属性劫持导致 autocomplete 未正确透传到真实 DOM。Vue 3 的 v-model、React 的受控组件都可能覆盖原生属性。
实操对策：
- React 中避免仅靠
value+onChange控制密码框，改用defaultValue+ 不设value，保留浏览器原生填充能力 - Vue 中用
v-bind显式绑定：<input v-bind:autocomplete="'given-name'">，避免模板编译时丢弃该属性 - 所有框架下，确保字段渲染完成后再聚焦（如
useEffect或mounted钩子中调用focus()），否则浏览器来不及注册该字段 - 服务端渲染（SSR）页面注意：若首屏 HTML 中
autocomplete值为空或动态计算，需确保 hydration 后值不变，否则 React/Vue 可能强制重置 DOM 属性
最易被忽略的一点：自动完成依赖用户主动交互（如点击或 Tab 进入字段）才能触发，纯靠 JS focus() 不足以激活 Chrome 的填充弹层 —— 必须等用户真实操作后，后续刷新页面才会复现提示。
