4.input输入框输入密码时，判断键盘的大写状态是否已打开

项目地址：gitee.com/mayxue/vue2…

1.效果：

2.html：

<template>
  <el-form class="my-form" size="small" label-width="100px">
      <div class="form">
        <el-form-item prop="password" label="密码：">
          <div class="passwordInput">
            <el-input
              :type="pwdType"
              v-model="loginForm.password"
              name="password"
              clearable
              auto-complete="on"
              placeholder="请输入8位以上合法密码"
              @keyup.enter.native="handleLogin"
              @keyup.native="loginKeyDown"
            />
            <span class="show-pwd" @click="showPwd">
              <svg-icon :icon-class="pwdType === 'password' ? 'eye' : 'eye-open'" />
            </span>
            <el-tag class="bigChar" v-show="bigChar" size="small">大写锁定已打开</el-tag>
          </div>
        </el-form-item>
      </div>
    </el-form>
</template>

3.methods:

  export default {
  data() {
    return {
      pwdType: "password",
      bigChar: false,
      loginForm: {
        password: ""
      }
    };
  },

  methods: {
    //密码是否可见
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    //判断键盘的大写状态是否已打开
    loginKeyDown(event) {
      //是否输入过字母键，且判断是否按键为caps lock
      if (this.firstTochar) {
        if (event.keyCode === 20) {
          this.bigChar = !this.bigChar;
          return;
        }
      } //未输入过字母键，或按键不是caps lock，判断每次最后输入的字符的大小写
      let e = event || window.event;
      let keyvalue = e.keyCode ? e.keyCode : e.which;
      let shifKey = e.shiftKey ? e.shiftKey : keyvalue == 16 ? true : false;
      if (typeof this.loginForm.password === "undefined") {
        return;
      }
      let strlen = this.loginForm.password.length;
      let password = this.loginForm.password;

      if (strlen) {
        let uniCode = password.charCodeAt(strlen - 1);
        if (keyvalue >= 65 && keyvalue <= 90) {
          //如果是字母键
          this.firstTochar = true;
          if (
            (uniCode >= 65 && uniCode <= 90 && !shifKey) ||
            (uniCode >= 97 && uniCode <= 122 && shifKey)
          ) {
            this.bigChar = true;
          } else {
            this.bigChar = false;
          }
        }
      }
    }
  }
};