实测网的好多方法都不管用,所以自己写了一个,主要的思想就是将password类型的input框改为text类型的input框,然后输入的时候将所输入字符转化为"●",话不多说,上代码
let val = data.password
let valReal = ''
if(data.passwordReal == ''){
valReal = JSON.parse(JSON.stringify(data.password))
}else{
valReal = JSON.parse(JSON.stringify(data.passwordReal))
}
console.log(val)
$scope.user.passwordReal = valReal
let nDot = /[^●]/g; // 非圆点字符
let index = -1; // 新输入的字符位置
let lastChar = void 0; // 新输入的字符
let realArr = $scope.user.passwordReal.split(""); // 真实密码数组
let coverArr = val.split(""); // 文本框显示密码数组
let coverLen = val.length; // 文本框字符串长度
let realLen = $scope.user.passwordReal.length; // 真实密码长度
// 找到新输入的字符及位置
coverArr.forEach((el, idx) => {
if (nDot.test(el)) {
index = idx;
lastChar = el;
}
});
if (realLen < coverLen) {
// 新增字符
realArr.splice(index, 0, lastChar);
} else if (coverLen <= realLen && index !== -1) {
// 替换字符(选取一个或多个字符直接替换)
realArr.splice(index, realLen - (coverLen - 1), lastChar);
} else {
console.log(document.getElementById("psw"))
// 删除字符,因为 val 全是 ● ,没有办法匹配,不知道是从末尾还是中间删除的字符,删除了几个,不好对 password 处理,所以可以通过光标的位置和 val 的长度来判断
let pos = document.getElementById("psw").selectionEnd; // 获取光标位置
console.log(pos)
realArr.splice(pos, realLen - coverLen);
}
// 将 pwdCover 替换成 ●
$scope.user.password = val.replace(/\S/g, "●");
$scope.user.passwordReal = realArr.join("");
此方法为输入框change事件,根据自己的业务需求简单修改即可。