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

参考

https://blog.csdn.net/zgahlibin/article/details/78321246

描述

如谷歌浏览器,使用input type="password"控件登录时,网址最后有一个小钥匙,而且会弹出提示框:是否记住该网站的密码。
期望达到的效果是没有小钥匙,而且不弹出提示框。

思路

放弃使用type="password"控件,而使用type=“text” 替换。每次输入时将字符替换为“●”,并将实际的文本传给一个隐藏的text。

实现

JavaScript中添加函数

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;

            $("#realpwd").val(truePassword);
            //console.log(truePassword);
        },false);
    }

表单实现

<form action="Servlet.LoginServlet" method="post">
        <h1>输入用户信息:</h1><br>
        <label>用 户 名:</label>
        <input type="text" name="name">
        <label>密  码:</label>
        <input type="text" id="password" name="password" password="" >
        <input type="text" id="realpwd" name="realpwd" style="display: none">
        <input type="submit" value="登陆">
 </form>

servlet中通过"realpwd"获取用户输入的密码即可

        String name = new String(request.getParameter("name"));
        String password = new String(request.getParameter("realpwd"));
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值