当用户在进行登录等操作提交表单后,浏览器会提示是否允许浏览器记住密码。
记住用户名密码在一定程度上会给用户体验带来好处,比如,当用户在下一次打开此登录页面表单会自动填充,直接登录
然而,也会带来一定坏得影响,比如该网站下存在另外需要填充密码的表单时,不对应的密码和用户名会自动填充该表单上(大致表现为,密码输入框会自动填充所保存密码,密码输入框的上一个输入框会自动填充用户名),用户需要清空后再填写正确的用户名密码,使操作繁琐,用户体验差。
解决办法:
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); }