浏览器自动填充失效主因是现代浏览器忽略autocomplete="off"，需用new-password等标准值、改name/type、拆分表单或加干扰字段协同控制。
浏览器自动填充（autocomplete）有时不生效，并非代码写错，而是受多种因素干扰。禁用自动填充不能只靠 autocomplete="off"，需结合场景针对性处理。
autocomplete="off" 在现代浏览器中基本失效
Chrome、Edge、Firefox 等主流浏览器已忽略全局 autocomplete="off"（尤其对密码、邮箱、姓名等敏感字段）。即使写了，浏览器仍可能根据 name、type、placeholder 或上下文推测字段用途并强行填充。
-
解决方法：用无意义的随机值替代语义化值，例如
autocomplete="nope"、autocomplete="false"或autocomplete="new-password"（对密码框有效） - 对登录/注册页的密码输入框，推荐直接使用
autocomplete="new-password"，这是目前最可靠的方式
input type 和 name 属性触发自动填充
浏览器会根据 type（如 email、tel、password）和 name（如 name="email"、name="phone"）自动关联历史记录。哪怕加了 autocomplete="off"，只要语义明确，依然可能被填充。
- 临时规避：把
name改成非标准名（如name="user_email_xxx"），或动态生成唯一 name 值 - type 可酌情改为
text（但需注意语义丢失影响无障碍和移动端键盘类型） - 避免在表单内连续出现多个语义化字段（如 email + password），可打散结构或延迟渲染
表单 context（上下文）导致 autocomplete 强制启用
浏览器会分析整个 <form> 的结构与字段组合。即使单个 input 设置了 autocomplete="off"，若它处于一个明显是“登录”或“地址填写”的表单中，浏览器仍可能无视该设置。
立即学习“前端免费学习笔记（深入）”；
- 拆分表单：将需禁用自动填充的字段移出主表单，用独立
<form autocomplete="off">包裹，或改用<div>配合 JS 提交 - 添加隐藏干扰字段：在表单开头插入一个不可见、
type="text"、autocomplete="new-password"的 input，可“骗过”浏览器的字段识别逻辑 - 重置 autocomplete 状态：页面加载后用 JS 清空 value 并 blur 一次，或设置
value=""后再设为 readonly 再移除（慎用，影响体验）
密码类字段有特殊规则
密码框（type="password"）是自动填充重灾区。浏览器对它的处理逻辑与其他字段不同——它会主动寻找配对的用户名/邮箱字段，并尝试填充。
- 必须同时设置：用户名字段用
autocomplete="username"或autocomplete="email"，密码字段用autocomplete="new-password" - 避免密码框出现在表单顶部；把它放在用户名字段之后，且中间不要插入其他表单控件
- 若为“修改密码”场景，旧密码、新密码、确认密码三个字段需分别设为
autocomplete="current-password"、autocomplete="new-password"、autocomplete="new-password"
禁用自动填充不是一劳永逸的事，关键是理解浏览器的启发式匹配逻辑，从 type、name、表单结构、字段顺序多角度协同控制。实际项目中建议优先用标准 autocomplete 值（如 new-password）而非盲目设 off。
