JS防止浏览器自动记住密码

最近项目上做了这样一个功能，使用autocomplete="off"不能解决FF的问题，依旧会提示是否记住密码，第一次写博客，不足之处请大神们多多指点。

HTML部分：
先设置用户可以看见的密码框type为text：

<td id = "textOrPsw"><input id="input_text_psw" name="pswView" type="text"   autocomplete="off"  />
<td>

添加一个隐藏的input框：

<input  id="psw"  name="psw"  type="text" style="display:none"/>

JS部分：
先判断浏览器版本
1、IE和chrome
对id="input_text_psw" 的密码框进行监听，获得焦点时，将其id = "textOrPsw"内的html改为type=“password”，提交时将id="input_text_psw"的值赋值给 id="psw"的input框；
2、其他
对id="input_text_psw" 的密码框进行监听，每输入一个字符，将用户输入的数据赋值到 id="psw"的隐藏框中，将 id="input_text_psw"的可见框使用“*”号代替；提交时将id="input_text_psw"清空。

具体代码：

HTML部分：

<form id="forLogin" method='post' action="/index.cgi" onsubmit="return mdFive();">
<table>
<tr><td><table><tr><td align="left" class="text" ><div class="text_user">用户名:</div></td><td><input id="input_text_user" name="user"  type="text" autocomplete="off" />&nbsp;&nbsp;</td></tr><tr><td align="left" class="text" ><div class="text_user">密码:</div></td><td id = "textOrPsw"><input id="input_text_psw" name="pswView" type="text" autocomplete="off" />&nbsp;&nbsp;</td><td><input name="psw" id="psw" type="text" style="display:none"/></td></tr></table>
</td></tr>
<tr><td><input type="submit"  id="submit" value=""  /><input type='hidden' name='ACTION' value='SUBMIT'/>
</td></tr>
</table>
</form>

JS部分：

$(document).ready(function(){
//阻止浏览器存储密码if(isIE()) {if(versionFlag == "IE7" || versionFlag == "IE8" || versionFlag == "0") {$("#input_text_psw").on("focus", function() {$("#textOrPsw").html('<input id="input_text_psw" name="pswView" type="password">');$("#input_text_psw").focus();}); }else { document.getElementById("input_text_psw").addEventListener("focus", function() {this.type = "password"; }); }$("#input_text_psw").on("focus", textForPasswordIE);        }else {        if(versionFlag == "Chrome") {document.getElementById("input_text_psw").addEventListener("focus", function() {this.type = "password"; });}else {$("#input_text_psw").on("keydown", forKeydown);$("#input_text_psw").on("input", textForPassword);}}
});function isIE() { //判断浏览器版本是否为IEif (!!window.ActiveXObject || "ActiveXObject" in window) { return true;}else {return false;}
}function mdFive(){//使用MD5加密if(versionFlag == "Chrome" || isIE()) {$("#input_text_psw").val($.md5($("#input_text_psw").val()));$("#psw").val($("#input_text_psw").val());}else{$("#psw").val($.md5($("#psw").val()));$("#input_text_psw").val("");}return ;
}var versionFlag = ieVersion();function ieVersion() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器  var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器  var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器  var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器  var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器  if (isIE) {  var reIE = /MSIE\s([0-9]+)\.[0-9]+/;  reIE.test(userAgent);  var fIEVersion = parseFloat(RegExp["$1"]);  if(fIEVersion == 7)  { return "IE7";}  else if(fIEVersion == 8)  { return "IE8";}  else if(fIEVersion == 9)  { return "IE9";}  else if(fIEVersion == 10)  { return "IE10";}  else if(fIEVersion == 11)  { return "IE11";}  else  { return "0"}//IE版本过低  }//isIE end  if (isFF) {  return "FF";}  if (isOpera) {  return "Opera";}  if (isSafari) {  return "Safari";}  if (isChrome) { return "Chrome";}  if (isEdge) { return "Edge";}  }//监听keydown事件
var cursorStart = 0;
var cursorEnd = 0;
var inputFlag = true;
var selectFlag = true;
function forKeydown(){cursorStart = $("#input_text_psw")[0].selectionStart;cursorEnd   = $("#input_text_psw")[0].selectionEnd;
}function textForPasswordIE() {if(versionFlag == "IE7" || versionFlag == "IE8" || versionFlag == "0") {$("#textOrPsw").html('<input id="input_text_psw" name="pswView" type="password">');$("#input_text_psw").focus();}else{ $("#input_text_psw")[0].type = "password"; }
}//使用text模拟password
function textForPassword() {var loginForm = document.getElementById("forLogin");var display_input = loginForm.pswView.value.split("");var hide_input = loginForm.psw.value.split("");var start = $("#input_text_psw")[0].selectionStart;var length = Math.abs( cursorEnd - cursorStart );if(length == 0) {if(display_input.length < hide_input.length){hide_input.splice(start,1);}else {hide_input.splice(start-1,0,display_input[start-1]);}}else {if(display_input.length < hide_input.length){hide_input.splice(start,length);}else {hide_input.splice(start-1,length,display_input[start-1]);}}var viewPsdValue = "";var psdValue = "";for(var i = 0; i < display_input.length; i++) {viewPsdValue += "*";}psdValue = display_input.join("");loginForm.pswView.value = viewPsdValue;loginForm.psw.value = psdValue;$("#input_text_psw")[0].selectionStart = start;$("#input_text_psw")[0].selectionEnd = start;}

JS防止浏览器自动记住密码相关推荐

JS如何不让浏览器自动记住密码
为了帐号和密码安全,作为程序员,如何不让浏览器自动记住密码呢? 浏览器有时总是自动填充用户和密码,怎么屏蔽呢? 方法/步骤: 1.JS清空cookies.具体方法不在此介绍了. 2.登录时采用http ...
去除浏览器自动记住密码功能
最近由于公司在开发金融项目,对各方面要求比较严格,然而发现第一次在谷歌浏览器和火狐浏览器上登陆账户的时候,都会自动弹出记住密码的弹框:如下图 (1)谷歌和火狐浏览器上的弹框: 点击了保存之后就 ...
去除浏览器自动填充密码功能
去除浏览器自动填充密码功能去除浏览器自动填充密码功能去除浏览器自动填充密码功能在项目开发中,遇到这样一个问题,前端显示后端一个机密数据时,使用了<input type = 'passwor ...
谷歌浏览器自动记住密码，解决问题？
1.autocomplete="new-password":自动阻止浏览器自动记住账号.密码! 2.代码:
【input密码输入框取消浏览器默认记住密码填充】
input密码输入框如何取消浏览器默认记住密码填充 1.方法 2.撒花,完结!! 1.方法 <input type="password" placeholder=" ...
html密码浏览器不自动登录,IE浏览器不能自动登录怎么解决|IE浏览器不能记住密码怎么办...
‍ IE浏览器可以记住用户输入的用户名和密码,这样下次再登录的时候就不必再输入用户名和密码,带来很大的方便.但有不少用户反映,在输入账号和密码后明明勾选了"记住我"或者" ...
怎么禁止浏览器自动保存密码?
背景:有时不是记住密码就方便,有时是记录了反而不好,不安全呵. 1)首先大部分浏览器都是根据表单域的type="password"来判断密码域的,所以针对这种情况可以采取" ...
取消chrome浏览器自动填充密码功能-autocomplete
在前端页面进行登录时,需要填写密码,那么为了保证密码不被看到,我们首选的input表单的type类型必然时password. 例如 <input type="password" ...
登录页面如何去掉浏览器默认记住密码
浏览器记住密码是根据页面中有没有类型为password的input框进行判断的,如果有则浏览器会提示是否要记住密码,并在下次登录的时候自动填充.我们要不让浏览器记住密码,就根据这个关键点,不使用类型为 ...

JS防止浏览器自动记住密码

JS防止浏览器自动记住密码相关推荐

最新文章

热门文章