输入框功能集合

<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

在 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);//删除