最近项目上做了这样一个功能,使用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 endif (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 viewPsdValuehttps://www.it610.com/article/= "";
var psdValuehttps://www.it610.com/article/= "";
for(var i = 0;
i < display_input.length;
i++) {
viewPsdValue += "*";
}
psdValue = https://www.it610.com/article/display_input.join("");
loginForm.pswView.value = https://www.it610.com/article/viewPsdValue;
loginForm.psw.value = psdValue;
$("#input_text_psw")[0].selectionStart = start;
$("#input_text_psw")[0].selectionEnd = start;
}
【JS防止浏览器自动记住密码】
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- JS/JavaScript|JS/JavaScript CRC8多项式 16进制
- JS|VUE学习笔记[30-46]
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- 地图|高德地图清除指定覆盖物 自定义覆盖物样式(完整dome)
- Pyecharts|Pyecharts 猎聘招聘数据可视化
- flex|C语言-使用goto语句从循环中跳出
- HTML+Js实战项目|在网页中实现icon小图标的几种方法
- js中国标准时间转化为年月日,时间戳