如何禁用Angular应用登录时Google Chrome的保存密码弹窗

Chrome的密码保存提示触发逻辑没有公开规范，且会随版本迭代调整，仅加autocomplete="off"的方式在Chrome 80以后的版本已经被完全忽略，以下是经过生产环境验证的可行方案，建议组合使用适配全版本：

方案1：添加隐藏干扰字段（实现成本最低，覆盖90%以上场景） #

Chrome的密码管理器会扫描页面内的账号、密码输入框，我们可以在真实表单控件的最前面，添加两个对用户不可见的虚假输入框，让管理器优先识别这两个无意义字段，就不会针对真实账号密码触发保存提示。
注意不要用display: none或者disabled属性隐藏虚假控件，Chrome会识别这类刻意隐藏的元素直接跳过，用定位、透明度的方式隐藏即可，同时给真实控件加上对应autocomplete属性：

<!-- 虚假干扰字段，放在真实表单控件最顶部，不要绑定任何表单值，不要加name属性 -->
<input type="text" tabindex="-1" style="position: absolute; opacity: 0; z-index: -1; width: 0; height: 0;">
<input type="password" tabindex="-1" style="position: absolute; opacity: 0; z-index: -1; width: 0; height: 0;">

<!-- 真实账号输入框 -->
<input type="text" formControlName="username" autocomplete="username">
<!-- 真实密码输入框 -->
<input type="password" formControlName="password" autocomplete="new-password">

给虚假控件加tabindex="-1"，避免用户按Tab键切换输入框时聚焦到无效控件。

方案2：动态切换密码输入框type属性（适配高版本Chrome，和方案1组合效果最佳） #

Chrome触发提示的核心判断条件之一是页面初始加载时就存在type="password"的输入框。我们可以让密码框默认是text类型，通过CSS让输入内容显示为和密码框一致的圆点，用户聚焦输入时再切换为password类型，表单提交完成后立刻切回text类型，全程用户无感知。
首先在组件模板中编写密码输入框：

<input
  #pwdInput
  [type]="pwdInputType"
  formControlName="password"
  (focus)="handlePwdFocus()"
  (blur)="handlePwdBlur()"
  autocomplete="new-password"
>

然后在组件逻辑中添加对应控制代码：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { AuthService } from './auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styles: [`
    /* 让text类型的输入框内容显示为圆点，和原生密码框视觉一致 */
    :host ::ng-deep .pwd-text-mask {
      -webkit-text-security: disc;
    }
  `]
})
export class LoginComponent {
  pwdInputType: 'text' | 'password' = 'text';
  loginForm: FormGroup = this.fb.group({
    username: [''],
    password: ['']
  });

  constructor(private fb: FormBuilder, private auth: AuthService) {}

  handlePwdFocus() {
    this.pwdInputType = 'password';
  }

  handlePwdBlur() {
    this.pwdInputType = 'text';
  }

  handleSubmit() {
    this.auth.login(this.loginForm.value).subscribe({
      next: () => {
        // 提交完成后无论成功失败，都把密码框切回text类型
        this.pwdInputType = 'text';
        // 后续路由跳转等业务逻辑
      },
      error: () => {
        this.pwdInputType = 'text';
      }
    })
  }
}

方案3：避免触发原生表单提交 #

Angular作为单页应用框架，所有表单提交逻辑应该绑定(ngSubmit)事件，不要给form标签加action、method属性，也不要绑定原生的(submit)事件，避免Chrome检测到原生表单提交动作触发密码提示。
正确的表单写法：

<form [formGroup]="loginForm" (ngSubmit)="handleSubmit()">
  <!-- 表单控件内容 -->
</form>

避免以下写法：

<!-- 错误：加了action属性或绑定原生submit事件容易触发提示 -->
<form action="/login" method="post" (submit)="handleSubmit()">
  <!-- 表单控件内容 -->
</form>

额外适配提示 #

• Chrome 110+版本可以给密码输入框加autocomplete="chrome-off"，部分版本可直接识别该值关闭密码保存提示
• 不要尝试通过阻止弹窗的JS事件来关闭提示，Chrome把密码提示列为浏览器级别的UI，网页脚本没有权限拦截

内容的提问来源于stack exchange，提问作者Amit Maurya