Vue 中监听登录时密码框的大小写

**

Vue 中监听登录时密码框的大小写

html部分
input 按键响应无效时，要在按键动作后添加native

<template>
<el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
    <el-form-item prop="password">
          <el-input
          :key="passwordType"
          v-model.trim="loginForm.password"
          :type="passwordType"
          placeholder="输入密码"
          tabindex="2"
          show-password
          @keyup.native="onHCapitalize($event)"
        />
           <i v-show="bigChar" class="bigchar">大写锁已打开</i>
    </el-form-item>
  </el-form>
 </template>
 

js部分
实现原理（根据按键的keyCode值、shfit的触发以及uniCode来实现65-90大写A-Z，97-122小写a-z）

<script>
  export default{
    data(){
      return{
        firstTochar: false,
        bigChar: false, // 大写锁监听
		loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        username: [{ required: true, trigger: "blur", message: "请输入账号" }],
        password: [{ required: true, trigger: "blur", message: "请输入密码" }],
      },
      }
    },
    methods:{
		onHCapitalize(event) {
      console.log("监听是否开启大写锁");
      const _this = this;
      if (_this.firstTochar) {
        if (event.keyCode === 20) {
          console.log("keyCode=20");
          _this.bigChar = !_this.bigChar;
          return;
        }
      }
      //未输入过字母键，或按键不是caps lock，判断每次最后输入的字符的大小写
      var e = event || window.event;
      var keyvalue = e.keyCode ? e.keyCode : e.which;
      var shifKey = e.shiftKey ? e.shiftKey : keyvalue == 16 ? true : false;
      // console.log(shifKey);
      if (typeof _this.loginForm.password === "undefined") {
        return;
      }
      let strlen = _this.loginForm.password.length;
      let pass = _this.loginForm.password;
      if (strlen) {
        let uniCode = pass.charCodeAt(strlen - 1);
        // console.log("unicode===" + uniCode);
        if (keyvalue >= 65 && keyvalue <= 90) {
          //大写
          // console.log(">=65<=90");
          _this.firstTochar = true;
          if (
            (uniCode >= 65 && uniCode <= 90 && !shifKey) ||
            (uniCode >= 97 && uniCode <= 122 && shifKey)
          ) {
            // console.log(">=65<=90没有按住shift或则》=97<=122 按住shift");
            _this.bigChar = true;
          } else {
            // console.log("小写");
            _this.bigChar = false;
          }
        }
      }
    },
    }
}
</script>

效果如下：