阻止浏览器对表单自动填充

来源:互联网 发布:中世纪2优化9火炮 编辑:程序博客网 时间:2024/05/21 16:25

当用户在进行登录等操作提交表单后,浏览器会提示是否允许浏览器记住密码。

记住用户名密码在一定程度上会给用户体验带来好处,比如,当用户在下一次打开此登录页面表单会自动填充,直接登录

然而,也会带来一定坏得影响,比如该网站下存在另外需要填充密码的表单时,不对应的密码和用户名会自动填充该表单上(大致表现为,密码输入框会自动填充所保存密码,密码输入框的上一个输入框会自动填充用户名),用户需要清空后再填写正确的用户名密码,使操作繁琐,用户体验差。

解决办法:

google之后发现据说 autocomplete=“off” 可以解决,但是chrome等不兼容,所以不可行。

猜想,浏览器自动填充识别的是 type="password" 然后将该input自动填入密码

那么,我们考虑将type=“password” 改为 type="text" ,然后再在必要的时候将其改回password

这个必要的时候我们选择在当密码的input获得焦点时,即在onFocus时改变type="password"

ok,我们组织代码如下   

// 这里使用jquery

$("#psw").focus(function(event) {   $(this).attr('type','password');});

ok,我们测试一下,诶,很顺利....诶???纳尼??lt ie8 ,ie8下无论怎样也不能修改到type的值

好吧,ie8以下行不通,寻找补救方案

既然不能修改,那么我们就插入新的input type="password" 进去,所以,前提我们要判断浏览器版本是小于ie8的版本

这里有一个很实用得办法

<!--[if lt ie9]><![endif]--> 这个标签大家都熟悉的多,而且它的特点是只有ie浏览器认识它,太棒了,就用它

var isLTIE9 = function(){    var bObj = document.createElement('b');    bObj.innerHTML = '<!--[if lt IE 9]><i></i><![endif]-->';    return bObj.getElementsByTagName('i').length === 1;}

这样我们就可以判断出小于ie9的ie浏览器了

汇总:

var isLTIE9 = function(){    var bObj = document.createElement('b');    bObj.innerHTML = '<!--[if lt IE 9]><i></i><![endif]-->';    return bObj.getElementsByTagName('i').length === 1;}if(!isLTIE9()) {   $("#psw").focus(function(event) {      $(this).attr('type','password');   });}else{   var pswInput = document.getElementById("psw");   var pswInput2 = pswInput.cloneNode(false);   pswInput2.type='password';   pswInput.parentNode.replaceChild(pswInput2,pswInput);}

1 0
原创粉丝点击