参考

描述

如谷歌浏览器，使用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"));