autocomplete="off"常失效,因Chrome 50+、Firefox 75+主动忽略以保障密码管理器功能;应使用规范值(如given-name、new-password)并成对设置current-password与new-password。

autocomplete="off" 为什么经常失效
浏览器对 autocomplete="off" 的处理早已不是简单听从。Chrome 从 50+、Firefox 从 75+ 开始,会忽略表单级或输入框级的 autocomplete="off",尤其当字段名匹配常见敏感字段(如 password、email、credit-card)时。这不是 bug,是主动的安全策略——防止网站禁用密码管理器。
实操建议:
- 别依赖
autocomplete="off"来“阻止”补全,它大概率不起作用 - 若真需禁用(比如动态生成的一次性验证码输入框),改用非语义化名称 + 随机值:
<input name="otp_<random>" autocomplete="new-password"> - 对密码字段,强制使用
autocomplete="new-password",这是目前唯一被主流浏览器认可的“禁用已有密码填充”方式
autocomplete 值该填什么才真正生效
有效值必须是 WHATWG 规范定义的 autofill field names,比如 given-name、street-address、tel。填错(如 autocomplete="firstname" 或 autocomplete="user")等于没写。
常见可用值与场景:
立即学习“前端免费学习笔记(深入)”;
- 姓名:用
given-name/family-name,不用first-name或name - 地址:用
street-address、address-level1(省)、postal-code,不用province或zip - 电话/邮箱:直接用
tel、email,它们是标准且高匹配度的 - 银行卡:用
cc-number、cc-exp、cc-csc,而非自造词
密码字段 autocomplete 必须成对设置
单设一个 password 输入框为 autocomplete="new-password" 不够。浏览器需要上下文判断是否为“新密码流程”。如果页面同时存在 current-password 和 new-password 字段,补全行为才准确。
典型错误写法:
<input type="password" name="pwd"> <!-- 浏览器可能自动填入旧密码 -->
正确写法(注册/改密场景):
<input type="password" name="current-pwd" autocomplete="current-password"><br><input type="password" name="new-pwd" autocomplete="new-password">
注意:current-password 必须出现在 new-password 之前,且两者需在同一个 <form> 内。
autocomplete 对 autofill 和 password manager 的影响差异
autocomplete 控制的是浏览器原生 autofill(地址/电话等结构化数据),不直接控制第三方密码管理器(如 1Password、Bitwarden)。后者通常监听 type="password" 和表单提交事件,与 autocomplete 值关系较弱。
但有个关键交叉点:Chrome 等浏览器会把 autocomplete="new-password" 作为触发密码保存提示的信号。如果漏掉这个值,用户改密后,浏览器可能不弹出“保存新密码”提示。
所以实际开发中:
- 结构化信息(地址、姓名)靠精准的
autocomplete值驱动 autofill - 密码流程靠
current-password/new-password组合驱动浏览器密码提示逻辑 - 第三方密码插件行为无法通过
autocomplete完全约束,但规范写法能减少冲突
最常被忽略的是:autocomplete 不是开关,是提示。它告诉浏览器“这个字段代表什么”,而不是“能不能填”。填不填,最终由浏览器策略和用户设置决定。



















