一、原因
使用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>
)
)
`：專業指南與實戰示例)
