vue2/js,大写键盘开启实时监控

最新推荐文章于 2024-05-30 11:27:58 发布

禾苗种树

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量78

点赞数 2

分类专栏： js 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_45011929/article/details/138713093

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

需求：用户登录时，需要实时监测大写键盘是否开启，通过监测key值，再页面上提示一句话
代码环境： Vue2，element
注意：当input失去焦点时，隐藏文字
代码

// html
<el-form-item prop="password" style="margin-bottom:5px;" >
              <el-input  v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="xxxx" @mousedown="handlePswFocus"  @blur="isCapsLockOn = false">
              </el-input>
  </el-form-item>

// js
export default {
  name: 'Login',
  data() {
    return {
			loginForm: {
		        username: '',
		        password: '',
		        isCapsLockOn :false,
	      	},
		}
    },
   mounted() {
   // 
    document.addEventListener('keyup', (e) => {
      // 检测caps lock状态
      if (e.getModifierState('CapsLock')) {
        this.isCapsLockOn = true;
        return;
      } else {
        this.isCapsLockOn = false;
      }
    })

  },

  methods: {
  	// 当input输入时实时观测大写键是否开启
    handlePswFocus(event) {
      // 检测caps lock状态
      if (event.getModifierState('CapsLock')) {
        this.isCapsLockOn = true;
      } else {
        this.isCapsLockOn = false;
      }
    },
    
   }

}