主要实现逻辑,把input type=“password” 改成 type=“text”
隐藏input密码,把真实密码存到input标签的一个属性中实现,下面的逻辑,每次input框中内容变化,获取真实密码逻辑如下
ps:复制一段字符串,选择一段●●或者直接把光标放到●●●●的中间粘贴都可以。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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的时候,要把真实密码属性一起改了。
————————————————
版权声明:本文为CSDN博主「zgahlibin」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/zgahlibin/article/details/78321246