参考
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"));