MacOS系统下Chrome对number类型输入框弹出密码建议弹窗如何解决？

解决方案 #

• 方案1：修改autocomplete属性值为new-password
  Chrome对autocomplete="off"做了特殊限制，非密码类输入框改用autocomplete="new-password"属性，可绕过Chrome的自动填充识别逻辑，有效性高于自定义属性值。
  修改后的代码如下：

<mat-form-field>
  <input matInput
    autocomplete="new-password"
    type="number"
    formControlName="leadTimeDays"
    placeholder="Lead time days">
</mat-form-field>

• 方案2：新增隐藏占位输入框
  在表单最开头插入两个隐藏的空输入框承接Chrome的自动填充逻辑，避免填充到业务输入框，代码如下：

<form [formGroup]="yourForm">
  <!-- 隐藏占位输入框 -->
  <input type="text" style="display:none" autocomplete="off">
  <input type="password" style="display:none" autocomplete="off">
  <!-- 原有表单内容 -->
  <mat-form-field>
    <!-- 原有输入框代码 -->
  </mat-form-field>
</form>

• 方案3：动态控制只读属性
  给目标输入框默认加readonly属性，用户触发焦点事件时再移除该属性，避免页面加载时Chrome识别为可填充输入框：

<input matInput
  autocomplete="new-password"
  type="number"
  formControlName="leadTimeDays"
  placeholder="Lead time days"
  [readonly]="true"
  (focus)="$event.target.removeAttribute('readonly')">

如果单个方案无法生效，可尝试多个方案组合使用，适配不同版本的Chrome浏览器。

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