Vue 键盘事件监听无效

[jtwang7]

Vue 键盘事件监听无效

参考文章：

• vuejs键盘事件不生效解决方式
• JS之组合键监听Ctrl/Shift...

❎ 问题描述

<el-button type="success" @keyup.enter="gomain()">登录</el-button>

代码如上，在使用 el-button 时，发现监听 keyup 的 enter 事件时，监听无效，后来查阅资料才发现要元素处于 focus 时才可以触发，如果按钮没有被选择，Enter 按钮时没有用。

✅ 解决方案
通过 js 原生事件解决：把监听事件绑在document上

//添加监听回车按键
created() {  
  var _this = this;
  document.addEventListener("keydown", _this.watchEnter);
},  
destroyed() {
  //移除监听回车按键
  var _this = this;
  document.removeEventListener("keydown", _this.watchEnter);
},
methods:{
  //监听回车按钮事件
  watchEnter(e) {
    var keyNum = window.event ? e.keyCode : e.which; //获取被按下的键值
    //判断如果用户按下了回车键（keycody=13）
    if (keyNum == 13) {
      按下回车按钮要做的事
    }
  },
}

✅ 补充 js 原生监听组合按键的方法
参考：JS之组合键监听Ctrl/Shift...

🔆 首先我们打印 keyxxx 事件的 event 对象

document.onkeydown = (e) => {
    console.log(e)
}

可以发现 event 对象中包含有 ctrlKey, shiftKey, altKey, metaKey 这些字段。这些字段就是原生 js 的组合键设置方式。

🔆 当我们按下 ctrl 键时，ctrlKey 字段就会变为 true，因此可以有如下 js 原生组合键书写方式。

document.onkeydown = (e) => {
    // 判断按下了 ctrl 并且同时按下了某个 key
    if(e.ctrlKey === true && e.key === 'q') {
      return alert('按下了ctrl+q键')
    }
}