输入框功能集合

<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"><iclass="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-inputv-model="loginForm.userCode"clearabletype="text"placeholder="输入您的账号"@input="checkChinese"style="width: 200px; margin: 10px 0"></el-input><br /><!-- 自写密码输入框 根源上阻止密码回填 --><el-inputv-model="pwdCover"type="text"id="pwd"placeholder="输入您的密码"@input="setPassword"style="width: 200px; margin-right: 10px"><islot="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

在 HTML 中，文本框和文本域都有 selectionStart 和 selectionEnd 这两个属性。它们分别表示当前选定文本的起始位置和结束位置，以字符为单位。

光标起始位置 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);//删除