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

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

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

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

猜你喜欢