浏览器忽略 autocomplete 属性是因值不符合whatwg规范，如须用“given-name”而非“name”，大小写敏感，且需结构化字段（如地址拆为street-address等）、密码成对声明、避免条件渲染导致字段初始化失败。
浏览器为什么忽略你的 autocomplete 属性
不是浏览器不支持，而是你写的值不符合 WHATWG 规范定义的合法关键词。比如写 autocomplete="name" 看似合理，但规范里只认 autocomplete="given-name" 或 autocomplete="family-name"——写错一个连字符或大小写，chrome 和 safari 都会直接无视。
- 必须用规范关键词：查 WHATWG autocomplete 字段列表，别凭经验猜
-
autocomplete值对大小写敏感，"email"有效，"Email"无效 - 表单没提交过、没成功过，浏览器不会记住字段映射关系；首次填写后刷新再试才可能触发
- 同页面多个
input用相同autocomplete值（如都写"tel"），浏览器会随机选一个填充，行为不可控
如何让地址字段正确匹配自动填充
地址是自动填充最混乱的场景：用户填的是“上海市浦东新区张江路123号”，但浏览器只认结构化字段。你得把一个地址拆成至少 4 个带语义的 input，否则填不全。
- 街道地址用
autocomplete="street-address"（注意不是"address"） - 城市、省、邮编必须分开：
autocomplete="address-level2"（城市）、autocomplete="address-level1"（省/州）、autocomplete="postal-code" - 国家代码建议用
autocomplete="country"+<select></select>，别用文本框 - 避免在地址字段上加
type="text"以外的类型（比如type="number"用于邮编），部分浏览器会拒绝填充
密码字段的 autocomplete 必须成对出现
只给密码输入框加 autocomplete="new-password" 没用。浏览器需要识别“注册”或“改密”上下文，而这个上下文靠两个字段的组合来判断。
- 新密码必须配一个旧密码字段：
<input autocomplete="current-password">+<input autocomplete="new-password"> - 注册页则用
autocomplete="new-password"+autocomplete="email"或autocomplete="username" -
autocomplete="off"在现代浏览器中基本失效，尤其对密码字段；强行禁用反而干扰密码管理器 - 如果用了 js 动态生成密码框（比如点击“显示密码”后替换
type），需同步重设autocomplete属性，否则填充失效
React/Vue 项目里 autocomplete 失效的常见原因
框架的虚拟 dom 行为会让浏览器“看不见”字段初始化过程。比如 React 中用 useState 控制表单显隐，首次渲染时 input 是空节点，等状态更新后才插入——此时浏览器已错过字段发现时机。
- 确保
input元素在组件挂载时就存在，不要用条件渲染（{show && <input ...>}）隐藏整个字段 - SSR 渲染时，服务端输出的 html 必须包含完整
autocomplete属性，不能靠客户端 JS 补充 - Vue 中用
v-model绑定时，若初始值为空字符串，某些版本 Chrome 会跳过自动填充；可设初始值为NULL或保留value原生属性 - 动态表单（如多步骤注册）中，每步切换时保持
name和autocomplete不变，否则浏览器认为是新字段
自动填充不是“加个属性就完事”的功能，它依赖浏览器对字段语义的准确识别、用户历史交互数据、以及前后端一致的结构表达。最容易被忽略的，是字段之间逻辑关系的显式声明——比如密码对、地址分段、姓名拆解，这些不靠 HTML 属性说清楚，JS 再怎么补救也白搭。