前端禁止浏览器自动保存密码弹框

前端开发用的什么软件 应聘前端开发需要做什么 前端开发的部门是什么意思

问题描述:浏览器会提供自动保存密码功能,我刚刚输入了用户名和密码,单击了浏览器提供的保存密码。而当我访问另外一个页面的时候,因为存在一个type=password的input,在谷歌浏览器中,却在这里把我刚刚保存的用户名和密码显示出来了,这是问题之一。
问题之二,我这里是一个要输入信用卡CVV Code的区域,因为是CVV Code,所以设置成了type=password,但这样的话,我单击下一步,IE、Chrome、FireFox都弹出了自动保存密码的对话框,这里并不是密码,却有提示,很不友好。

为解决这两个问题,浏览了一些国内和国外的网站。

**对于问题一:**是因为type=password引起的,保存了密码之后,进入另一个页面的时候,如果有type=password,浏览器会寻找与它临近的input type=text,将用户名填上。
由此,解决方法有:仍然使用type=password,只是增加了fake input control,即在此之前加上[code]<input type="text" style="display:none;" />[/code],用于混淆浏览器。
第二个方法,使用type=text,当用户输入密码的时候进行编码,即转换成小圆点,这里写了一段代码,首先是两个控件,hidden的控件用于提交表单:

[code]<input type=”hidden” name=”test.cvvCode” />
<input id=”cvvCode” type=”text” aria-required=”true” maxlength=”4″ />
[/code]
用于编码的js代码:
[code]<script type=”text/javascript”>
if(isIE)
{
document.getElementById(“cvvCode”).onpropertychange = MaskPassword();
}
else //FF
{
document.getElementById(“cvvCode”).addEventListener(“input”, MaskPassword, false);
}
function MaskPassword(){
var inputPassword = document.getElementById(“cvvCode”).value;
var plainPassword = document.getElementsByName(“test.cvvCode”)[0].value;
var encodePassword = ”;
if (inputPassword != ”) {
for (var i=0; i<inputPassword.length; i++) {
if (inputPassword.charAt(i) == “\u25CF”){ // has been encode
encodePassword += inputPassword.charAt(i);
} else{
plainPassword += document.getElementById(“cvvCode”).value.charAt(i)
encodePassword += “\u25CF”;
}
}
} else{
plainPassword = inputPassword;
}
document.getElementsByName(“test.cvvCode”)[0].value = plainPassword;
document.getElementById(“cvvCode”).value = encodePassword;
}
</script>
[/code]
首先判断是什么浏览器,然后绑定什么方法,onpropertychange是IE专有的。
后面方法是输入一位,改变一位,变成“\u25CF”小圆点,然后赋值为隐藏域,进行提交表单。
这样的不足之处是:按F12,hidden的value会显示出来。

对于问题二:
原来有个属性autocomplete=off,现在随着浏览器的升级,IE11,Chrome34+,FireFox30都不再支持这个属性了,由此使用这个方法不能解决问题二。
关于各大浏览器disable这个属性,有的说是,用户输入用户名和密码后,浏览器没有弹出自动保存密码的对话框的话,用户会认为浏览器有问题;还有人认为这是浏览器的bug。
现在用的是两个fake input control,即在原来的type=password控件前添加:

[code]<input type=”text” id=”fakeUserId” style=”display:none;” />
<input type=”password” id=”fakePwd” style=”display:none;” />[/code]
这样一来,IE和Chrome不再弹了,但是火狐还是会弹出自动保存密码对话框。

什么是安卓前端开发 什么是前端开发的环境 前端开发需要什么书

» 本文来自:前端开发者 » 《前端禁止浏览器自动保存密码弹框》
» 本文链接地址:https://www.rokub.com/5559.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!