在 onfocus 表单字段中隐藏密码管理器自动完成功能

Posted 2023-02-24

【中文标题】在 onfocus 表单字段中隐藏密码管理器自动完成功能

【英文标题】：Hide password manager autocomplete in form fields onfocus

【发布时间】：2021-07-13 07:03:32

【问题描述】：

我通过密码管理器在 chrome 浏览器中保存了密码，并且我有以下 输入字段

<input type="text" placeholder="" formControlName="username" #log_name autocomplete="off">
<input type="password" placeholder="" formControlName="password" #pass autocomplete="off">

每次页面刷新浏览器都会自动填充字段

我所做的是在输入中输入 readonly 和 onfocus 以禁用自动填充

<input type="text" placeholder="" formControlName="username" #log_name autocomplete="off" 
readonly onfocus="if (this.hasAttribute('readonly')) this.removeAttribute('readonly');>

<input type="password" placeholder="" formControlName="password" #pass autocomplete="off" 
readonly onfocus="if (this.hasAttribute('readonly')) this.removeAttribute('readonly');>

现在自动填充会停止每次刷新，这很好。

问题

有没有办法可以隐藏密码管理自动填充字段的焦点（那个黑色的）？

【参考方案1】：

Try adding autocomplete to the form as shown below

<form name="loginForm" autocomplete="off">
<input type="text" placeholder="" formControlName="username" #log_name autocomplete="off" 
readonly onfocus="if (this.hasAttribute('readonly')) this.removeAttribute('readonly');>

<input type="password" placeholder="" formControlName="password" #pass autocomplete="off" 
readonly onfocus="if (this.hasAttribute('readonly')) this.removeAttribute('readonly');>
</form>