解决浏览器自动填充密码框的问题
今天解决了一个问题,就是万恶的浏览器自动填充密码(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,会给出下面的提示,如果鼠标移动上去,还是会填充,鼠标移开后就消失了:
欢迎讨论。。。
上一篇: 去除浏览器自动记住密码功能
下一篇: 日历、分页插件的使用
推荐阅读
-
遇到QQ浏览器没有搜索框这样的问题怎么解决?
-
解决浏览器会自动填充密码的问题
-
问题:layui+element模板的文本框input自动加逗号,:已解决
-
谷歌浏览器input输入框做登录功能,记住密码后,背景是黄色的问题是怎么回事?
-
解决浏览器自动填充密码框的问题
-
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
-
完美解决谷歌浏览器自动填充问题
-
解决Google浏览器Chrome总是弹框提示The device was not found的问题
-
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
-
input password输入框默认填充密码的解决方案