现代浏览器忽略autocomplete="off"，尤其对密码框；有效方案是添加隐藏干扰字段、初始设type="text"并focus时切换、动态生成name和autocomplete值。
现代浏览器根本不听 autocomplete="off"，单独写这个属性基本等于没写。 它不是失效，而是被浏览器主动忽略——Chrome、Edge、Safari 从 2021 年起就明确把该值当作建议而非指令，尤其对 type="password" 字段，几乎强制填充。
为什么 autocomplete="off" 在密码框里完全没用
浏览器自动填充逻辑不看这个属性，而是扫描 DOM 中第一个 type="password" 元素，并根据 name、id、前后标签结构（比如是否紧邻 type="email"）推断语义。哪怕你写了 autocomplete="off"，只要字段是 type="password" 且 name="password"，Chrome 就会填。
- 控制台会报 warning：
autocomplete="off" is not supported - 刷新页面后，密码框仍显示旧密码
- 在非登录页（如支付确认页）意外弹出 PIN 填充菜单
- 给
<button>加autocomplete="off"—— 完全无效，按钮根本不参与填充流程
真正有效的组合策略：干扰识别 + 控制时机
核心思路不是“阻止”，而是让浏览器“找不到要填的字段”或“填错地方”。以下三步缺一不可：
- 加一个隐藏的干扰字段：
<input type="password" style="display:none;">，必须是type="password"，不能disabled或readonly，且要放在真实密码框之前 - 真实密码框初始设为
type="text"，并在focus事件中才切为type="password"，防止页面加载时被预填充 - 动态生成
name和autocomplete值，例如：name="pwd_<script>document.write(Date.now())</script>"、autocomplete="nope"
示例片段：
立即学习“前端免费学习笔记（深入）”；
<form>
<!-- 干扰字段：浏览器会填这里，但用户看不见 -->
<input type="password" style="display:none;" aria-hidden="true">
<!-- 真实字段：初始 text，focus 后改 password -->
<input id="real-pwd" type="text" name="pwd_12345" autocomplete="nope">
</form>
<script>
document.getElementById('real-pwd').addEventListener('focus', function() {
if (this.type === 'text') this.type = 'password';
});
</script>Chrome 120+ 的新限制：new-password 不再单打独斗
从 Chrome 120 开始，autocomplete="new-password" 只有在表单中同时存在 autocomplete="current-password" 字段时才会被认真对待。也就是说，浏览器现在要求“新旧密码成对出现”才启用该语义。
- 单独给注册页的密码框写
autocomplete="new-password"，Chrome 120+ 很可能直接忽略 - 登录页应使用
autocomplete="current-password"，而不是off—— 这反而更安全，能避免错填成其他账号的密码 - 如果必须用
new-password，请确保它和一个带current-password的字段共存于同一<form> - 不要给
new-password字段设初始value，否则 Chrome 会认为内容已存在，触发覆盖式填充
最易被忽略的一点：自动填充发生在 HTML 解析阶段，不是 JS 执行后。所以任何依赖“DOM 加载完再插入密码框”的方案，都必须确保该节点不在初始 HTML 中 —— 动态 appendChild 是可行的，但用 innerHTML 插入含 type="password" 的字符串，仍可能被解析器提前捕获。
