HTML密码文本框总自动填充的问题

2021-03-31 13:42 Evan.Pei 阅读(316) 评论(0) 编辑收藏举报

1.在开发登陆页面时无论是否记住密码网页都会自动填充登陆过的用户名密码进入因为有一个password的存在。

2.解决思路是文本框还是用text,只是里面的内容用●代替，将密码放入他的一个属性中。

3.在文本框输入时去更新属性。

1	`<input` `id="txt_2" maxlength="20" placeholder="密码" onfocus="Clearpwd();" password="" class="form-control" />`

//监听录入事件
    function UpdatePwd() {
        document.getElementById("txt_2").addEventListener('input', function () {
            var _this = this;
            var newPassword = _this.value;
            var oldPassword = window.decodeURIComponent(window.atob(_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', window.btoa(window.encodeURIComponent(truePassword)));//加密
            _this.value = newPassword;
            // 解决在win8中光标总是到input框的最后
            _this.selectionEnd = p;
            _this.selectionStart = p;
        }, false);
    }
    //获取光标事件
    function Clearpwd() {
        $("#txt_2").val("");
    }

function SaveData() {
        var name = $("#txt_1").val();
        var pwd = window.decodeURIComponent(window.atob($("#txt_2").attr("password")));//密码属性;
        var zz = /["'<>%;)(&+]/;
        if (zz.test(name) || name == "" || zz.test(pwd) || $("#txt_2").val() == "") {
            Alert2("不能录入特殊字符且不能为空！");
            return false;
        }
        $.post("/Backstage/SaveUser", { name: name, pwd: pwd, oldid: $("#hi_rid").val() }, function (data) {
            Alert2(data);
            CloseChy2("div_addProduct");
            GetContent("");
        });
    }