什么情况聚焦用户名输入框不会显示自动填充弹框?

首先看看浏览器填充表单密码的机制（各浏览器机制有些许不同），以 Chrome 为例，机制如下：

• 此域名下保存过用户信息。
• 找到第一个 input[type=password]元素，填充密码； 再找到其上一个 input[type=text] 元素，填充用户名。

如果 input 元素 display:none，不填充信息，浏览器会继续往上找 input[type=text] 元素，visibility:hidden 会填充信息。

符合上面条件的 input[type=text] 元素在获得焦点（focus）时显示密码弹框。

focus 用户名、密码不会显示自动填充弹框

按照上面的逻辑，放两个不显示的输入框骗过浏览器，就可以不显示弹框了。

<form>
  <input style="opacity: 0;position:absolute;width:0;height:0;">
  <input type="password" style="opacity: 0;position:absolute;width:0;height:0;">
  <div>
    <input type="text" autocomplete="off" name="test"></input>
  </div>
  <div>
    <input type="password" autocomplete="off" name="password"></input>
  </div>
  <button>save</button>
</form>
复制代码

注意：如果用户原本有账户信息被保存到浏览器中，即使将原代码后续改为下面的代码，聚焦密码弹框仍可以自动填充

资料

• 浏览器保存密码后自动填充问题