vue项目解决页面登录时,禁止浏览器提醒是否保存密码
主要思路1.通过input输入框,监听输入值,进行替换成*符号,避免使用input的type="password"类型,造成浏览器提醒是否记住密码;如果是vue、react等项目请自行改造一下代码!vue项目解决页面登录时,禁止浏览器提醒是否保存密码......
·
主要思路
1.通过input输入框,监听输入值,进行替换成*符号,避免使用input
的type="password"
类型,造成浏览器提醒是否记住密码;
如果是vue、react等项目请自行改造一下代码!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script src="./jquery.min.js"></script>
<body>
<form id="forLogin" method='post' 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" /> </td>
</tr>
<tr>
<td align="left" class="text">
<div class="text_user">密码:</div>
</td>
<td id="textOrPsw">
<input id="inputText" name="pswView" type="text" autocomplete="off" /> </td>
<td>
<!-- 此处可以隐藏或将值放到变量中 -->
<input name="psw" id="psw" type="text" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type="submit" id="submit" value="" />
<input type='hidden' name='ACTION' value='SUBMIT' />
</td>
</tr>
</table>
</form>
</body>
<script>
$(document).ready(function () {
var inputEle = $('#inputText');
inputEle.on("keydown", handlerKeydown);
inputEle.on("input", handlerPassword);
var cursorStart = 0;
var cursorEnd = 0;
function handlerKeydown() {
cursorStart = inputEle[0].selectionStart;
cursorEnd = inputEle[0].selectionEnd;
console.log(cursorStart,cursorEnd)
}
function handlerPassword(e) {
var loginForm = document.getElementById("forLogin");
var old_input = loginForm.pswView.value;
var display_input = old_input;
var hide_input = loginForm.psw.value.split("");
if(e.originalEvent.data === ' ') {
console.log('过滤空格');
loginForm.pswView.value = hide_input.join("").replace(/./g,'*');
return
}
var start = inputEle[0].selectionStart;
var length = Math.abs(cursorEnd - cursorStart);
console.log('cursorEnd - cursorStart: ' + length)
console.log('cursorEnd:' + cursorEnd + ' ,cursorStart: '+ cursorStart + ' ,start:' + start)
if (length == 0) {
if (display_input.length < hide_input.length) {
console.log('单个删除')
hide_input.splice(start, 1);
} else {
console.log('添加')
hide_input.splice(cursorEnd, 0, display_input.slice(cursorEnd,start));
}
} else {
if (display_input.length < hide_input.length && cursorStart === start) {
hide_input.splice(start, length);
console.log('选中删除');
} else {
console.log('替换')
hide_input.splice(cursorStart, length, display_input.slice(cursorStart,start));
}
}
var viewPsdValue = "";
var psdValue = "";
for (var i = 0; i < old_input.length; i++) {
viewPsdValue += "*";
}
psdValue = hide_input.join("");
console.log('密码结果: ' + psdValue +'')
loginForm.pswView.value = viewPsdValue;
loginForm.psw.value = psdValue;
inputEle[0].selectionStart = start;
inputEle[0].selectionEnd = start;
}
});
</script>
</html>
更多推荐
已为社区贡献7条内容
所有评论(0)