<template>
<div style="padding: 10px">
<!-- 密码输入框 -->
<el-input
:type="inputType"
v-model="password"
placeholder="请输入密码"
auto-complete="new-password"
id="pwd"
style="width: 200px; margin-right: 10px"
>
<i
class="el-input__icon el-icon-view el-input__clear"
slot="suffix"
@mousedown="showPwd('text')"
@mouseup="showPwd('password')"
@mouseleave="showPwd('password')"
style="user-select: none"
></i>
</el-input>
<el-button @click="focusFunc" type="primary">聚焦结尾</el-button>
<br />
<!-- 账号输入框 限制仅允许输入非汉字 -->
<el-input
v-model="loginForm.userCode"
clearable
type="text"
placeholder="输入您的账号"
@input="checkChinese"
style="width: 200px; margin: 10px 0"
>
</el-input>
<br />
<!-- 自写密码输入框 根源上阻止密码回填 -->
<el-input
v-model="pwdCover"
type="text"
id="pwd"
placeholder="输入您的密码"
@input="setPassword"
style="width: 200px; margin-right: 10px"
>
<i
slot="suffix"
class="el-input__icon el-icon-view el-input__clear"
@mousedown="hidePassword(true)"
@mouseup="hidePassword(false)"
@mouseleave="hidePassword(false)"
></i>
</el-input>
</div>
</template>
<script>
export default {
data() {
return {
inputType: "password", //输入框类型
password: "", //密码
//
pwdCover: "", // 密码 临时显示变量
isShowPassword: false, // 显示密码标志位
loginForm: {
userCode: "", // 账号
password: "", // 密码
},
};
},
methods: {
// 显示密码
showPwd(key) {
this.inputType = key;
},
// 聚焦到输入框结尾
focusFunc() {
this.$nextTick(() => {
var num = this.password.length;
var dom = document.getElementById("pwd");
dom.focus(); //聚焦
dom.setSelectionRange(num, num); //移动光标
});
},
// 校验输入非汉字
checkChinese(value) {
if (value) {
if (/[\u4E00-\u9FA5]/g.test(value)) {
this.loginForm.userCode = value.replace(/[\u4E00-\u9FA5]/g, "");
}
}
},
// 输入框输入事件
setPassword(val) {
if (val) {
if (/[\u4E00-\u9FA5]/g.test(val)) {
val = val.replace(/[\u4E00-\u9FA5]/g, "");
this.pwdCover = val;
}
}
if (this.isShowPassword) {
this.loginForm.password = val;
} else {
// let reg = /[0-9a-zA-Z]/g; // 只允许输入字母和数字
let reg = /./g; // 只允许输入字母和数字
let nDot = /[^●]/g; // 非圆点字符
let index = -1; // 新输入的字符位置
let lastChar = void 0; // 新输入的字符
let realArr = this.loginForm.password.split(""); // 真实密码数组
let coverArr = val.split(""); // 文本框显示密码数组
let coverLen = val.length; // 文本框字符串长度
let realLen = this.loginForm.password.length; // 真实密码长度
// 找到新输入的字符及位置
coverArr.forEach((el, idx) => {
if (nDot.test(el)) {
index = idx;
lastChar = el;
}
});
// 判断输入的字符是否符合规范，不符合的话去掉该字符
if (lastChar && !reg.test(lastChar)) {
coverArr.splice(index, 1);
this.pwdCover = coverArr.join("");
return;
}
if (realLen < coverLen) {
// 新增字符
realArr.splice(index, 0, lastChar);
} else if (coverLen <= realLen && index !== -1) {
// 替换字符（选取一个或多个字符直接替换）
realArr.splice(index, realLen - (coverLen - 1), lastChar);
} else {
// 删除字符，因为 val 全是 ● ，没有办法匹配，不知道是从末尾还是中间删除的字符，删除了几个，不好对 password 处理，所以可以通过光标的位置和 val 的长度来判断
let pos = document.getElementById("pwd").selectionEnd; // 获取光标位置
realArr.splice(pos, realLen - coverLen);
}
// 将 pwdCover 替换成 ●
this.pwdCover = val.replace(/\S/g, "●");
this.loginForm.password = realArr.join("");
}
},
// 点击右侧小眼睛控制显示隐藏
hidePassword(flag) {
if (flag) {
console.log("显示");
this.isShowPassword = true;
this.pwdCover = this.loginForm.password;
} else {
console.log("隐藏");
this.isShowPassword = false;
this.pwdCover = this.pwdCover.replace(/\S/g, "●");
}
},
},
};
</script>
光标起始位置 selectionStart
光标结束位置 selectionEnd
let pos = document.getElementById("pwd").selectionEnd;// 举个栗子
const textarea = document.querySelector('textarea');
const start = textarea.selectionStart;
const end = textarea.selectionEnd;
const textToReplace = 'hello world';
textarea.value = textarea.value.substring(0, start) + textToReplace + textarea.value.substring(end);//替换
textarea.value = textarea.value.substring(0, start) + textarea.value.substring(end);//删除
