Vue 3.X element-plus 监听大小写锁定键状态，对密码输入框进行大写锁定提示

文章讲述了如何在前端使用JavaScript事件监听和KeyboardEvent.getModifierState方法来检测大写锁定键(CapsLock)的状态，特别是在密码输入框中提供大写锁定开启的提示。在Vue.js环境中，通过绑定事件和修改组件状态来实现实时显示或隐藏提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

功能

监听大小写锁定键状态，对密码输入框进行大写锁定提示。

方法

监听鼠标点击事件，键盘keyup、keydown事件。

KeyboardEvent.getModifierState()可以检测指定的功能键是否激活。它的常用参数如下：

Alt：Alt 键
CapsLock：大写锁定键
Control：Ctrl 键
Meta：Meta 键
NumLock：数字键盘开关键
Shift：Shift 键

参考MouseEvent getModifierState() 方法 (w3school.com.cn)

实现

前端：不采用focus事件，因为focus获得的event里没有getModifierState方法。注意当焦点不在密码输入框时，把提示隐藏。

<el-tooltip :visible="visible" effect="light" content="大写锁定已打开" placement="bottom">    
    <el-input v-model="password" type="password" 
        @blur="visible = false" @mousedown="handlePswFocus" />
</el-tooltip>

JS：

onMounted(() => {
  document.addEventListener('keyup', (e) => {
    // 检测caps lock状态
    if (e.getModifierState('CapsLock')) {
      visible.value = true;
      return;
    } else {
      visible.value = false;
    }
  })
})
function handlePswFocus(event) {
  // 检测caps lock状态
  if (event.getModifierState('CapsLock')) {
    visible.value = true;
  } else {
    visible.value = false;
  }
}