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

关注

原创 2023-03-03 11:36:10 1.3k 阅读 AI 写同款· GEO 优化 ›

基于V7-690T FPGA纯逻辑实现NVMe SSD盘的读写（不使用软核） a.NVMe的Admin CQ与Admin SQ命令放在Host内存中；因此SQ的64B要用FPGA的DDR或开一个bram空间存放，同理NVME写到HOST的CQ命令也需要存放在FPGA的DDR或一个bram空间，host收到NVME传来的MSI/MSI-X中断后，去CQ存放空间取CQ指令；b. 发送identify命令后，需要发送tial doorbell通知NVME；（发送CNS01h获取4096字节的固件信息等；发送CNS02h获取1024字节的namaspace list）阅读详情

功能

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

方法

监听鼠标点击事件，键盘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;
  }
}