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

主要实现逻辑,把input type="password"  改成 type="text"  
隐藏input密码,把真实密码存到input标签的一个属性中实现,下面的逻辑,每次input框中内容变化,获取真实密码逻辑如下
ps:复制一段字符串,选择一段或者直接把光标放到●的中间粘贴都可以。
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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的时候,要把真实密码属性一起改了。

如有问题请回复我,谢谢!

 
 

你可能感兴趣的:(html5)