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的時候,要把真實密碼屬性一起改了。
如有問題請回復我,謝謝!