html 解决 input type="password" 标签自动记住账号密码

来源：互联网发布：专业手机摄影软件编辑：程序博客网时间：2024/05/29 17:03

主要实现逻辑，把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的时候，要把真实密码属性一起改了。

如有问题请回复我，谢谢！

阅读全文

0 0