HTML autocomplete 属性可用于以文本或数字值作为输入的 <input> 元素 , <textarea> 元素, <select> 元素, 和<form> 元素。
账号密码提示框:
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5cb5f1c162134b5dac17287367ef3634~tplv-k3u1fbpfcp-zoom-1.image)
平时我们使用 autocomplete="off"
取消浏览器自动填充和或文本提示,如图:
![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3dbaeb1d10024f5681d75b9126e13edc~tplv-k3u1fbpfcp-zoom-1.image)
但是大多数浏览器中,设置了也无法阻止 input[type=password]
自动填充密码以及询问是否保存密码,如果对为何这样设定感兴趣可以看看 the autocomplete attribute and login fields。
除了让用户手动修改浏览器设置,我们应该如何从代码层面取消自动提示或隐藏密码提示框呢?
首先看看浏览器填充表单密码的机制(各浏览器机制有些许不同),以 Chrome 为例,机制如下:
- 此域名下保存过用户信息。
- 找到第一个
input[type=password]
元素,填充密码; 再找到其上一个 input[type=text]
元素,填充用户名。
如果 input 元素 display:none
,不填充信息,浏览器会继续往上找 input[type=text]
元素,visibility:hidden
会填充信息。
符合上面条件的 input[type=text]
元素在获得焦点(focus)时显示密码弹框。
取消自动填充密码,聚焦显示密码弹框
载入界面自动填充密码
![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b97b1a5a3bcd4dffa89d2627211cba34~tplv-k3u1fbpfcp-watermark.image)
通过在 inptu[type=password]
的元素上设置属性 autocomplete="new-password"
即可
<form>
<div>
<input type="text" name="test"></input>
</div>
<div>
<input type="password" autocomplete="new-password" name="password"></input>
</div>
<button>save</button>
</form>
取消自动填充密码,聚焦不显示密码弹框
![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ea4ed1334d6a436b9e20f767c305c677~tplv-k3u1fbpfcp-zoom-1.image)
按照密码提示填充的逻辑,放两个不显示的输入框骗过浏览器,就可以不显示弹框了。
<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>
注意:如果用户已经在当前域名保存了账户信息,那么即使将原代码后续改为上面的代码,聚焦密码弹框仍可以自动填充。
资料