欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

解决浏览器自动填充密码框的问题

程序员文章站 2022-07-13 09:59:33
...

今天解决了一个问题,就是万恶的浏览器自动填充密码(ps:在不恰当的地方做了 不恰当的事)

解决前的图片:

解决浏览器自动填充密码框的问题

先声明一下:我使用的页面是ftl的静态页面。非html文件。

这里先不说废话,先说我搜到的3种方法(js清空值的那种方法不考虑,怕有延迟会造成先有值,然后消失的情况,不友好):

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

 <input type="text" name="pw" id="pw" required onfocus="this.type='password'" class="form-control"  />

2.在用户名和密码之间加上一个隐藏的文本框:

 <input type="text" name="counts" id="counts" required class="form-control"  />
 <input type="password" style="display: none"/>
 <input type="password" name="pw" id="pw" required class="form-control" />


3.使用html5的属性:

 <input type="text" name="counts" id="counts" required class="form-control"  autocomplete="off"/>
 <input type="password" name="pw" id="pw" required  class="form-control"  autocomplete="off" />


说一下我使用各种方法的情况:

在我解决这个问题的时候,文本框里面已经加入了html5的属性,但是没什么卵用,所以第三种方法在我这里不好用。

我试的一直是网上搜索到的使用的最多的解决方法,第2种,加一个隐藏的密码框,因为有说浏览器会给第一个type为password的文本框填充。然后如果这个框中没有id和name属性的话,浏览器是不会进行填充的。使用了以后,发现不隐藏的时候,谷歌浏览器还真不填充了。但是我已设置display属性,就不好用了。而且360浏览器是会给最后一个密码框赋值,不隐藏也不管用。

不过如果一直点击进入这个页面,过几次,这个属性就又管用了,没找到原因。

第一种方法:进入页面的时候,还真的没有填充,我以为好用了,先输入上面的文本框,然后输入密码,确实没问题。但是当我先点击密码的时候,悲剧发生了,自动填充又出来了。

最后的解决方法:(划重点了)

    当我把第二个方法和第三个方法合起来用的时候,问题解决了。
 <input type="text" name="counts" id="counts" required class="form-control"  autocomplete="off">
  <input type="password" style="display: none"/>
 <input type="text" name="pw" id="pw" required onfocus="this.type='password'" class="form-control"  autocomplete="off" >

解决后的图片:

解决浏览器自动填充密码框的问题

最后:  第三个方法我没去掉,有兴趣的可以试试。

美中不足,当我焦点在password,会给出下面的提示,如果鼠标移动上去,还是会填充,鼠标移开后就消失了:

解决浏览器自动填充密码框的问题

 欢迎讨论。。。