浏览器自动填充依赖autocomplete值严格匹配whatwg规范，如given-name、tel、street-address等，错写大小写、连字符或语义偏差即失效；且需字段初始存在于dom、包裹在内、type/name/label协同完整。
浏览器自动填充不是“加个属性就灵”，而是靠 autocomplete 值是否精准匹配 WHATWG 规范来决定填不填、填什么。写错一个连字符、大小写或语义偏差，Chrome 和 Safari 都会直接跳过——哪怕其他所有条件都对。
autocomplete 值必须严格符合 WHATWG 标准关键词
浏览器只认规范定义的字符串，比如 given-name，不是 firstname；email 有效，Email 或 user-email 无效。常见字段对应关系如下：
-
name是无效值；应拆为given-name（名）和family-name（姓） -
tel可用，但phone不被识别；中文场景下tel比telephone更可靠 -
street-address有效，address或shipping-address无效 - 密码字段必须成对：登录页需同时存在
current-password和username或email；注册页需new-password+email或username -
postal-code在国内基本不触发，因浏览器极少保存中国邮政编码
为什么写了正确值还是不填充？检查 DOM 时机与结构
autocomplete 生效的前提是字段在页面加载初期就存在于 DOM 中、可见、可交互，并包裹在 <form></form> 内。常见失效原因包括：
- 用
v-if（Vue）或{show && <input>}（React）动态渲染 input —— 浏览器已错过发现时机 - input 被
display: none或visibility: hidden隐藏，即使后续显示，Safari 仍会跳过 - 表单未包裹在
<form></form>标签中，或action属性为空/缺失，浏览器认为无提交上下文 - JS 在 onload 后立即清空
input.value，中断了浏览器的自动填充流程 - 同一页面多个字段共用相同
autocomplete值（如两个tel），浏览器随机选一个填充，行为不可控
React/Vue 中 autocomplete 失效的典型陷阱
框架的响应式绑定容易覆盖原生自动填充行为，关键不在“有没有写 autocomplete”，而在“它是否在字段挂载时就生效”：
- React 受控组件中，若只写
value={state}却没配onChange，字段变成只读，浏览器跳过填充 - 想保留自动填充又不想立刻同步 state，改用
defaultValue替代value（仅限首次渲染） - Vue 的
v-model若初始 data 字段为undefined或空字符串，某些 Chrome 版本会忽略自动填充；建议初始化为null - SSR 渲染时，服务端 HTML 必须包含完整
autocomplete属性，不能依赖客户端 JS 补充 - 多步骤表单切换时，确保每步的
name和autocomplete值保持一致，否则浏览器视为新字段
动态控制 autocomplete 开关的可靠做法
用户需要手动开关自动填充时，别用 autocomplete="off" 硬禁用——现代浏览器（尤其 Chrome 117+）会无视它。更稳妥的方式是：
- 用
setAttribute('autocomplete', 'on')或'off'动态更新，不要用input.autocomplete = 'on'（反射行为不一致） - 对密码类字段，禁用时应设为
new-password，而非off；这是唯一被广泛支持的“请勿填充”信号 - 复选框控制示例中，务必给 input 和 checkbox 设置明确
id，避免 DOM 查询失败 - 若页面有多个受控字段，封装逻辑时传入元素引用比反复
querySelector更稳定 - 注意：Safari 对属性变更的响应延迟更高，必要时可在 setAttribute 后加
input.focus()主动唤起
最常被忽略的一点：autocomplete 不是独立生效的魔法属性，它必须和 type、name、<label></label>、<form></form> 结构协同工作。单独调对一个值，解决不了问题；整套语义链断了一环，整个字段就掉出浏览器的自动填充视野。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
