【JS】【29】解决浏览器自动填充密码输入框的问题

前言:该文章仅为记录方法,原博写得很好,可直接查看原博。我在实际项目中觉得比较麻烦,直接自动填充就自动填充算了,并未做处理

正文:

1,使用HTML属性(autocomplete="off")

<input type="password" autocomplete="off"/>

由于自动填充这个特性是浏览器自己实现的,autocomplete这个属性也没有被写入W3C规范。很多浏览器都会直接忽略这个属性。无法禁用自动填充。

2,使用js在页面加载的时候设置input的value为空

浏览器的自动填充居然是在js执行完后再填充的。在使用js设置了input的value为空后,浏览器又把input自动填充,无法解决问题。

3,额外增加<input type="password" style="display:none" />

<!-- 额外增加的input -->
<input type="password" style="display:none"/>
<!-- 原先的input -->
<input type="password"/>

网上流传甚广的一个方法。这个方法在大部分版本的浏览器上是可行的,但是在某些高版本的浏览器和Safari中失效。后面介绍的几种方法都是基于这个方法的改进。

4,增加form

<!-- 额外增加的form和input -->
<form style="display:none">
  <input type="password"/>
</form>
<!-- 原先的input -->
<input type="password"/>

这个方法较上面那个解决了Safari下自动填充的问题。但是在某些高版本Chrome下失效。(经测试Chrome 46.0可行,Chrome 47.0失效)

5,最终解决方案

<!-- 额外增加的内容 -->
<form style="display:none">
  <input type="password"/>
</form>
<input type="password" style="0;height:0;float:left;visibility:hidden"/>
<!-- 原先的input -->
<input type="password"/>

这个方案结合了上面两种方法,最终连Chrome 47.0下自动填充的问题也解决掉。

这个方法中需要注意的是与目标input同辈的input不能设置成 display:none,如果设置后再Chrome 47.0上会自动填充,因此只能使用其他手段把这个input隐藏。

6,其他博客的方案

(1)把input type="password" 改成 input type="text" 并在后面加上 onfocus="this.type='password'"

<input type="text" onfocus="this.type='password'" />

(2)在文档加载完成后将密码输入框设置为空

window.load = function(){ 
    document.getElementById('密码域ID').value=''; 
}; 

(3)在用户名和密码之间加上一个隐藏的文本框

<input type="text" name="name">
<input type="hidden">
<input type="password" name="pass">

注:我当时写的时候(1)(2)是有效的,但可能也存在兼容问题

参考博客:

解决浏览器记住密码输入框的问题 - imdennisleung的专栏 - CSDN博客
https://blog.csdn.net/imdennisleung/article/details/51220387 

阻止浏览器记住密码功能干扰表单填充 - 每天都记录一点点! - CSDN博客
https://blog.csdn.net/playboyanta123/article/details/43795643

原文地址:https://www.cnblogs.com/huashengweilong/p/11039880.html