Angular项目中autocomplete=off无效，如何阻止浏览器自动填充输入框？

主流浏览器（Chrome、Firefox等）现在会忽略部分场景下的autocomplete="off"，尤其是用户名/密码字段，这是为了保留用户的自动填充体验。以下是几个可行的解决方案：

方案1：使用浏览器认可的autocomplete属性值 #

对于密码框，使用规范定义的autocomplete="new-password"，明确告诉浏览器这是需要输入新密码的字段，不要自动填充；用户名框可配合autocomplete="username"使用：

<div class='name' *ngIf="COMPTE_FRANCAIS==true">
  <input type="text" autocomplete="username" [(ngModel)]="driver.loginAm"
         [placeholder]="'DRIVERS.FORM.LOGIN' | translate" [matTooltip]="'DRIVERS.FORM.LOGIN' | translate">
  <input type="password" autocomplete="new-password" [(ngModel)]="driver.pwdAm"
         [placeholder]="'DRIVERS.FORM.PWD' | translate" [matTooltip]="'DRIVERS.FORM.PWD' | translate">

  <a href="https://authps-espacepro.ameli.fr/" target="_blank" rel="noopener noreferrer"
     style="margin-top: auto;">
    <button class="btn btn-ameli">
      <img src="./../../../../assets/img/ameli.png">
    </button>
  </a>
</div>

方案2：添加隐藏的"诱饵"输入框 #

在真实输入框前添加两个隐藏的输入框，引导浏览器自动填充到这些诱饵框中，避免真实输入框被填充：

<div class='name' *ngIf="COMPTE_FRANCAIS==true">
  <!-- 诱饵输入框，引导浏览器填充到此处 -->
  <input type="text" name="fake-login" autocomplete="username" style="position: absolute; left: -9999px;">
  <input type="password" name="fake-pwd" autocomplete="password" style="position: absolute; left: -9999px;">

  <input type="text" autocomplete="off" [(ngModel)]="driver.loginAm"
         [placeholder]="'DRIVERS.FORM.LOGIN' | translate" [matTooltip]="'DRIVERS.FORM.LOGIN' | translate">
  <input type="password" autocomplete="off" [(ngModel)]="driver.pwdAm"
         [placeholder]="'DRIVERS.FORM.PWD' | translate" [matTooltip]="'DRIVERS.FORM.PWD' | translate">

  <a href="https://authps-espacepro.ameli.fr/" target="_blank" rel="noopener noreferrer"
     style="margin-top: auto;">
    <button class="btn btn-ameli">
      <img src="./../../../../assets/img/ameli.png">
    </button>
  </a>
</div>

注意：使用position: absolute; left: -9999px比display: none更可靠，部分浏览器会忽略display:none的输入框。

方案3：组件内延迟清空绑定值 #

利用浏览器自动填充在页面渲染完成后执行的特性，在组件的ngAfterViewInit钩子中延迟清空输入框的绑定值：

import { Component, AfterViewInit } from '@angular/core';

@Component({
  // 你的组件元数据
})
export class YourDriverComponent implements AfterViewInit {
  driver = { loginAm: '', pwdAm: '' };

  ngAfterViewInit(): void {
    // 延迟100ms执行，确保浏览器自动填充完成
    setTimeout(() => {
      this.driver.loginAm = '';
      this.driver.pwdAm = '';
    }, 100);
  }
}

方案4：结合readonly属性控制 #

给输入框设置readonly，在用户聚焦时移除该属性，浏览器不会填充只读状态的输入框：

<div class='name' *ngIf="COMPTE_FRANCAIS==true">
  <input type="text" autocomplete="off" [(ngModel)]="driver.loginAm"
         readonly (focus)="$event.target.removeAttribute('readonly')"
         [placeholder]="'DRIVERS.FORM.LOGIN' | translate" [matTooltip]="'DRIVERS.FORM.LOGIN' | translate">
  <input type="password" autocomplete="off" [(ngModel)]="driver.pwdAm"
         readonly (focus)="$event.target.removeAttribute('readonly')"
         [placeholder]="'DRIVERS.FORM.PWD' | translate" [matTooltip]="'DRIVERS.FORM.PWD' | translate">

  <a href="https://authps-espacepro.ameli.fr/" target="_blank" rel="noopener noreferrer"
     style="margin-top: auto;">
    <button class="btn btn-ameli">
      <img src="./../../../../assets/img/ameli.png">
    </button>
  </a>
</div>

内容的提问来源于stack exchange，提问作者Mouhamed Salim Slama