页面登录阻止浏览器提醒是否保存密码
一、原因
使用input的type="password"类型，浏览器会提醒是否记住密码。
二、解决
取消type="password"
三、实现输入密码*代替
通过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>