项目开发中要求不能直接使用password类型的密码输入框该怎么做？(干货直接跳例5)

最近有个项目，在做登录模块时，要求不让使用password类型的密码输入框，是为了防止报安全问题，因为password类型的密码输入框，容易被浏览器记住密码，很不安全。我在网上找了几种方法，效果也都不尽人意，那么在密码输入这一块，大家都是怎么做的呢？

1.动态切换type类型（还是会被谷歌浏览器记住密码,公司报安全问题）

网上有这么一种方法，初始时将输入框type类型设置为text，当文本框聚焦时，将type类型改为password，失去焦点时，再将type类型改为text，同时将明文密码用特殊符号替换。

html:

<div id="loginform"><div class="inputDiv common_flexBox common_flexBox_j_b common_flexBox_a_c"><img src="../image/pass.png" alt="" class="icon"><input type="text" name="textPass" maxlength="18" id="textHidePass" autocomplete="off" readonly="readonly" class="inpt common_flex1 common_box_sizing"/></div><div class="inputDiv common_flexBox common_flexBox_j_b common_flexBox_a_c"><img src="../image/pass.png" alt="" class="icon"><input type="text" name="" id="textPass" maxlength="18" autocomplete="off" placeholder="请输入密码" class="inpt common_flex1 common_box_sizing"oncopy="return false;" onpaste="return false;" oncut="return false;" ondrop="return false;" onselectstart="return false;" oncontextmenu="return false;"onfocus="changeType()" onblur="resetType()"oninput="setPass()"></div></div>

js:

<script src="/libs/jquery/2.1.4/jquery.min.js"></script><script>function changeType(){//● //• //·//获取焦点时，将隐藏域的值赋值给密码输入框，同时将type类型改为"password"$("#textPass").val($("#textHidePass").val()).prop("type","password")}function resetType(){//失去焦点时将密码输入框的值替换为'•'，将type类型改回"text"$("#textPass").val($("#textPass").val().replace(/[^\•]/g,'•')).prop("type","text");}function setPass(){//输入时将密码输入框的值赋值给隐藏域$("#textHidePass").val($("#textPass").val());}</script>

css:在文章的最后，公共css

于是我就上手体验了一番，发现输入时没有一点问题，但是submit提交的时候，竟然又被浏览器获取到密码了，额~，跟password类型没啥区别，肯定会报安全问题，pass。

2.使用按键的事件函数onkeydown（IE,Firefox,Chrome三种浏览器的兼容问题）

既然涉及到passwrd类型的方案行不通，那只能用text类型的输入框了，先给input框绑定一个onkeydown方法。

html：

<div id="loginform"><div class="inputDiv common_flexBox common_flexBox_j_b common_flexBox_a_c"><img src="../image/pass.png" alt="" class="icon"><input type="text" name="textPass" maxlength="18" id="textHidePass" autocomplete="off" readonly="readonly" class="inpt common_flex1 common_box_sizing"/></div><div class="inputDiv common_flexBox common_flexBox_j_b common_flexBox_a_c"><img src="../image/pass.png" alt="" class="icon"><input type="text" name="" id="textPass" maxlength="18" autocomplete="off" placeholder="请输入密码" class="inpt common_flex1 common_box_sizing"oncopy="return false;" onpaste="return false;" oncut="return false;" ondrop="return false;" onselectstart="return false;" oncontextmenu="return false;"onkeydown="if(event.keyCode==13){};textFunction(event)"></div></div>

js:

var timer = null;//测试function textFunction(e){/*事件对象*/var evt = e||window.event;/*在这里我强制在任何按键操作生效之前,将鼠标光标聚焦到输入框尾部,只能在尾部输入或删除密码*//*如果有需求,想在任意位置删除或输入密码的话,可去掉这段代码,然后获取当前光标位置,将当前输入的有效字符插入到隐藏input的对应位置*/var obj = evt.srcElement;const len = obj.value.length;obj.selectionStart = obj.selectionEnd = len;/*获取本次输入事件之前隐藏的密码内容,下面会和本次新输入的字符做拼接*/var oldValue = $("#textHidePass").val()||'';/*延时是为了异步获取本次输入的字符,方便拼接,* 至于延时时间,谷歌浏览器下设置为0*/clearTimeout(timer);timer = setTimeout(function(){setValue(evt,oldValue);},0)}function setValue(evt,oldValue){/*在中文输入法下,只有当输入完毕点击回车后才会写入输入框,但是密码基本上是要禁止输入中文的,所以加上失焦,聚焦方法后使每次输入的中文拼音,能直接转成英文字符写入*/evt.target.blur();evt.target.focus();var nowValue = evt.target.value;nowValue = nowValue.replace(/[\u4E00-\u9FA5]/g,'');//过滤掉中文var effectValue = nowValue.replace(/[\●]/g,'');//过滤掉●，留下输入的有效字符if(nowValue.length>18){nowValue = nowValue.substr(0,18)}if(nowValue.length>oldValue.length){//有新输入的有效字符$("#textPass").val(oldValue+effectValue);$("#textHidePass").val(oldValue+effectValue);}else if(nowValue.length==oldValue.length){$("#textPass").val(oldValue);$("#textHidePass").val(oldValue);}else{//有删除$("#textPass").val(oldValue.substr(0,nowValue.length));$("#textHidePass").val(oldValue.substr(0,nowValue.length));}// ●// •$("#textHidePass").val($("#textHidePass").val().replace(/[\●]/g,''));/*Chrome 94.0.4606.81最新版本有问题*密码的 最后一位 明明已经替换成●了，打印出来也是●，但是页面显示任然是明文*再加上一个延时才解决*/setTimeout(function(){evt.target.value=$("#textHidePass").val().replace(/./g,'●');},0)}

css:在文章的最后，公共css

在这种情况下，chrome浏览器下能够很好的兼容，Firefox也没什么问题，主要是IE11(目前只测试了IE11版本)，输入时会导致页面卡死，或者没反应,百度了一下可能是因为setTimeout导致的进程卡死，

3.使用按键的事件函数onkeydown,onkeypress,onkeyup（IE,Firefox,Chrome三种浏览器的兼容问题）

IE和Chrome浏览器下没问题，但是在Firefox下，英文输入法没问题，但是中文输入法偶尔会出现输入进去的问题，pass

4.使用oninput事件处理输入内容（Chrome和Firefox很好的兼容，IE报错）

元素上绑定的oninput事件，在IE11下页面加载的时候会自动执行一次oninput方法，而又因为当前页面js的引入必须放在dom渲染后面，所以在页面渲染的时候找不到oninput绑定的方法而报错。pass.

5.判断浏览器类型,动态设置输入事件方法

于是我结合3和4的方法，在页面加载时根据浏览器的类型，动态设置输入事件。Chrome和IE浏览器使用onkeyup和onkeypress处理函数，Firefox使用oninput处理函数。

在$(function(){})中添加以下代码:

var result = getBrowser();if(result.indexOf('chrome')!=-1||result.indexOf('ie')!=-1){//登录密码输入框var logPassStr = "";logPassStr += "<input type='text' id='loginUserPass' maxlength='18' autocomplete='off' placeholder='请输入密码' class='layui-input inpt common_flex1 common_box_sizing'";logPassStr += "oncopy='return false;' onpaste='return false;' oncut='return false;' ondrop='return false;' onselectstart='return false;' oncontextmenu='return false;'";logPassStr += "onkeydown='if(event.keyCode==13){clickLogin()};logPassKeydown(event)'";logPassStr += "onkeyup=\"logPassKeyup(event,'loginUserHidePass');\"";logPassStr += "onkeypress=\"logPassKeypress(event,'loginUserHidePass');\">"$("#loginUserPass").remove();$("#logPassBox").append(logPassStr);}else if(result.indexOf('firefox')!=-1){//登录密码输入框var logPassStr = "";logPassStr += "<input type='text' id='loginUserPass' maxlength='18' autocomplete='off' placeholder='请输入密码' class='layui-input inpt common_flex1 common_box_sizing'";logPassStr += "oncopy='return false;' onpaste='return false;' oncut='return false;' ondrop='return false;' onselectstart='return false;' oncontextmenu='return false;'";logPassStr += "onkeydown='if(event.keyCode==13){clickLogin()};logPassKeydown(event)' oninput=\"logPassSave(event,'loginUserHidePass')\">";$("#loginUserPass").remove();$("#logPassBox").append(logPassStr);}else{//表示其他浏览器layer.alert("当前浏览器版本可能不兼容,建议使用<span style='color:red'>火狐浏览器</span>、<span style='color:red'>谷歌浏览器</span>、和<span style='color:red'>&nbsp;IE&nbsp;11以上版本</span>的浏览器访问!", { icon: 7, closeBtn: 0 }, function (index) { layer.close(index);});}

/** 登录密码输入事件onkeyup* * */function logPassKeyup(event,hideTarget){event=event?event:window.event;event.target.blur();event.target.focus();setTimeout(function(){logPassSave(event,hideTarget);},10)}/** 登录密码输入事件onkeypress* * */function logPassKeypress(event,hideTarget){event=event?event:window.event;if(event.ctrlKey){return false;}else{var kcode=event.which?event.which:event.keyCode;if(kcode!=8){var usercode=document.getElementById(hideTarget); usercode.value=usercode.value+String.fromCharCode(kcode);}}}/** 登录密码输入事件logPassSave* * */function logPassSave(event,hideTarget){// ●// •event.target.blur();event.target.focus();var hideInput = document.getElementById(hideTarget);var oldValue = hideInput.value;var nowValue = event.target.value;var effectValue = nowValue.replace(/[\●]/g,'')||'';if(nowValue.length>oldValue.length){//有新输入event.target.value = oldValue+effectValue;hideInput.value = oldValue+effectValue;}else if(nowValue.length==oldValue.length){event.target.value = oldValue;hideInput.value = oldValue;}else{//有删除event.target.value = oldValue.substr(0,nowValue.length);hideInput.value = oldValue.substr(0,nowValue.length);}event.target.value=event.target.value.replace(/./g,'●');}

获取浏览器类型

/*** 获取浏览器类型** @param getVersion* @returns {*}*/function getBrowser(getVersion) {var ua_str = navigator.userAgent.toLowerCase(),ie_Tridents,trident,match_str,ie_aer_rv,browser_chi_Type;if ("ActiveXObject" in self) {ie_aer_rv = (match_str = ua_str.match(/msie ([\d.]+)/)) ? match_str[1] : (match_str = ua_str.match(/rv:([\d.]+)/)) ? match_str[1] : 0;ie_Tridents = {"trident/7.0": 11, "trident/6.0": 10, "trident/5.0": 9, "trident/4.0": 8};trident = (match_str = ua_str.match(/(trident\/[\d.]+|edge\/[\d.]+)/)) ? match_str[1] : undefined;browser_chi_Type = (ie_Tridents[trident] || ie_aer_rv) > 0 ? "ie" : undefined;} else {browser_chi_Type = (match_str = ua_str.match(/edge\/([\d.]+)/)) ? "edge" :(match_str = ua_str.match(/firefox\/([\d.]+)/)) ? "firefox" :(match_str = ua_str.match(/chrome\/([\d.]+)/)) ? "chrome" :(match_str = ua_str.match(/opera.([\d.]+)/)) ? "opera" :(match_str = ua_str.match(/version\/([\d.]+).*safari/)) ? "safari" : undefined;}var verNum, verStr;verNum = trident && ie_Tridents[trident] ? ie_Tridents[trident] : match_str[1];verStr = (getVersion != undefined) ? browser_chi_Type + "/" + verNum : browser_chi_Type;console.log("浏览器是：" + verStr);return verStr;}

总结:该方法在目前的三款主流浏览器中都能很好的兼容(公司条件有限，safari浏览器暂时没做测试)，但还有部分输入法在火狐(firefox)下出现把中文输入进去的问题，切换到英文就没问题了，但目前使用中只发现一种，影响不大。

密码输入框的图标：

公用css:

#loginform{width:300px;margin:0 auto;}/*伸缩盒子模型*/.common_flexBox {display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */display: -moz-box; /* 老版本语法: Firefox (buggy) */display: -ms-flexbox; /* 混合版本语法: IE 10 */display: -webkit-flex; /* 新版本语法: Chrome 21+ */display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;}/*主轴两端对齐*/.common_flexBox_j_b {-webkit-box-pack: justify;-moz-justify-content: space-between;-webkit-justify-content: space-between;justify-content: space-between;}/*交叉轴居中对齐*/.common_flexBox_a_c {-webkit-box-align: center;-moz-align-items: center;-webkit-align-items: center;align-items: center;}.inputDiv {position: relative;width:100%;margin-top: 15px;}.inputDiv .inpt{width: 100%;height: 40px;background: #FFFFFF;border: 1px solid #CBC9C9;border-radius: 2px;padding-left: 30px;}.inputDiv .icon {position: absolute;top: 11px;left: 6px;}

注：<!--οncοpy="return false;" οnpaste="return false;" oncut="return false;" οndrοp="return false;" onselectstart="return false;" οncοntextmenu="return false;" -->是密码输入框额外的一些方功能，禁止对密码输入框进行拷贝、粘贴、剪切等操作。

以上例5就是我自己琢磨出来一种方式，希望对大家有所帮助，当然如果大家有更好的解决方案，也希望能够分享给我，多多交流。