html 解決 input type="password" 標籤自動記住賬號密碼
阿新 • • 發佈：2019-02-18
主要實現邏輯，把input type="password" 改成 type="text"
隱藏input密碼，把真實密碼存到input標籤的一個屬性中實現，下面的邏輯，每次input框中內容變化，獲取真實密碼邏輯如下
ps:複製一段字串，選擇一段●●或者直接把游標放到●●●●的中間貼上都可以。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> window.onload = function () { document.getElementById("password").addEventListener('input', function () { var _this = this; var newPassword = _this.value; var oldPassword = _this.getAttribute("password"); var deta = newPassword.length-oldPassword.length; var truePassword = ""; var p = _this.selectionEnd;//游標結束時的位置 for(var i=0; i<newPassword.length; i++){ var c = newPassword.charAt(i); if(i<p && c!='●'){ truePassword += c; }else if(i<p && c=='●'){ truePassword += oldPassword.charAt(i); }else { truePassword += oldPassword.substr(oldPassword.length-newPassword.length+p,newPassword.length-p); break; } } newPassword = truePassword.replace(/\S/g, '●'); _this.setAttribute('password', truePassword); _this.value = newPassword;
// 解決在win8中游標總是到input框的最後
_this.selectionEnd = p;
_this.selectionStart = p;
//console.log(truePassword);
},false);
}
</script>
</head>
<body>
<input id="password" type="text" placeholder="密碼" password="" >
</body>
</html>
演示效果如下：
jQuery繫結input事件：
$(selector).on('input', function () {
});
js改變input的value的時候，要把真實密碼屬性一起改了。
如有問題請回復我，謝謝！