如何阻止浏览器自动填充PrimeNG p-password组件的密码？

针对你设置autocomplete="new-password"后，点击输入框仍弹出密码建议的问题，可以尝试以下几种有效方案：

方案1：添加隐藏诱饵输入框 #

浏览器会优先识别页面上的第一个密码输入框并填充，我们可以在p-password组件前添加一个隐藏的密码输入框作为诱饵，引导浏览器填充到这个不可见的字段：

<!-- 隐藏的诱饵输入框 -->
<input type="password" style="position: absolute; width: 0; height: 0; opacity: 0;" autocomplete="off" />

<p-password 
  autocomplete="new-password" 
  [toggleMask]="true" 
  [feedback]="false"
/>

方案2：组合autocomplete属性+随机name值 #

浏览器对固定name的密码字段更容易触发自动填充，我们可以给p-password组件设置随机生成的name属性，同时保留autocomplete="new-password"：

<p-password 
  [name]="'password-' + Math.random()"
  autocomplete="new-password" 
  [toggleMask]="true" 
  [feedback]="false"
/>

方案3：动态控制readonly属性 #

通过初始设置输入框为只读，点击/聚焦时移除只读属性，阻止浏览器在交互时触发自动填充：

<p-password 
  #passwordComp
  autocomplete="new-password" 
  [toggleMask]="true" 
  [feedback]="false"
  [readonly]="true"
  (click)="passwordComp.inputViewChild.nativeElement.removeAttribute('readonly')"
  (focus)="passwordComp.inputViewChild.nativeElement.removeAttribute('readonly')"
/>

原理说明 #

浏览器的密码自动填充逻辑优先级较高，单一的autocomplete属性有时无法完全覆盖其默认行为。以上方案通过干扰浏览器的字段识别逻辑，或者动态修改输入框状态，来达到阻止自动填充的目的。

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