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

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

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


    


添加一个隐藏的input框:

 

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部分:

用户名:
  
密码:
  

JS部分:

$(document).ready(function(){
//阻止浏览器存储密码
    if(isIE()) {
        if(versionFlag == "IE7" || versionFlag == "IE8" || versionFlag == "0") {
            $("#input_text_psw").on("focus", function() {
                $("#textOrPsw").html('');
                $("#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() { //判断浏览器版本是否为IE
    if (!!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_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)