浏览器总填错autocomplete值是因为只认w3c标准值，如email、given-name、current-password等，大小写敏感、不可自造（如user_name无效），且需配合正确表单结构与字段顺序。
浏览器为什么总填错 autocomplete 值？
因为浏览器只认标准属性值，不是你随便写个 autocomplete="name" 就能生效。它有一套严格定义的 token 列表（如 name、given-name、family-name、email、current-password），填错或自造值（比如 autocomplete="user_name"）会导致自动填充失效，甚至被忽略。
- 必须用 W3C 定义的合法值：
given-name而非first_name，organization而非company -
autocomplete值区分大小写，Email无效，必须小写email - 密码字段必须配对：登录页的
autocomplete="username"+autocomplete="current-password"，注册页则要用new-password - 避免在非敏感字段（如搜索框、筛选项）滥用
autocomplete="off"—— 现代浏览器会忽略它，反而可能触发更激进的启发式填充
autocomplete="off" 为什么不起作用？
Chrome、Firefox、Safari 在多数场景下已废弃对 autocomplete="off" 的支持，尤其对 <input type="password"> 或含 name/id 包含 “pass”、“pwd”、“password” 的字段。浏览器认为用户明确需要密码管理器介入，强制关闭会被绕过。
- 真正有效的做法是换名：把
name="password"改成name="password-temp"，提交前用 JS 赋值到真实字段 - 或用
autocomplete="new-password"替代off，告诉浏览器“这是新密码，别填旧的” - 若需彻底禁用（如 OTP 输入框），可加
autocomplete="one-time-code"（Chrome 90+ 支持），或配合type="text"+inputmode="numeric"+ 动态移除name属性
如何让密码管理器正确识别注册/登录流程？
关键不在单个字段，而在整个表单的语义结构和字段顺序。密码管理器依赖 form 的 action、method 和字段组合来判断上下文。
- 登录表单必须包含且仅包含一个
autocomplete="username"（或email）和一个autocomplete="current-password" - 注册表单必须有
autocomplete="new-password"，且不能与current-password出现在同一表单中 - 避免在登录页混入注册字段（如“确认密码”），哪怕 display:none；浏览器仍可能解析并干扰匹配
- 表单
id或name不要含 “login”、“signin”、“register” 等关键词 —— 某些密码管理器会据此误判行为模式
隐私泄露风险常藏在 autocomplete 的隐式继承里
父级 form 设了 autocomplete="on"，子 input 却没显式声明，浏览器仍会基于 name、id、placeholder 启发式填充 —— 这正是很多“没写 autocomplete 却被填”的原因。
- 所有敏感输入必须显式声明
autocomplete，不依赖默认行为 -
placeholder="手机号"+name="mobile"极易被识别为tel并填充，应改用autocomplete="tel"或明确设为autocomplete="tel-national" - 使用动态表单（如步骤式注册）时，每步的
input都要重置autocomplete值，避免上一步残留影响
真正麻烦的不是写对几个属性，而是浏览器和密码管理器各自维护一套不完全兼容的启发规则 —— 你得同时满足规范定义、主流实现、以及用户实际使用的那款密码工具的行为偏好。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
