Vue中监听/禁用键盘事件 - 人五人六博客网_个人技术博客_php、前端vue等技术分享_个人经验

keyCode	实际键值
48到57	0到9
65到90	a到z（A到Z）
112到135	F1到F24
8	BackSpace（退格）
9	Tab
13	Enter（回车）
20	Caps_Lock（大写锁定）
32	Space（空格键）
37	Left（左箭头）
38	Up（上箭头）
39	Right（右箭头）
40	Down（下箭头）
45	Insert（插入）
46	Delete（删除）
27	ESC

在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的事件。

别名	实际键值
.delete	delete（删除）/BackSpace（退格）
.tab	Tab
.enter	Enter（回车）
.esc	Esc（退出）
.space	Space（空格键）
.left	Left（左箭头）
.up	Up（上箭头）
.right	Right（右箭头）
.down	Down（下箭头）
.ctrl	Ctrl
.alt	Alt
.shift	Shift
.meta	(window系统下是window键，mac下是command键)

另外，Vue中还支持组合写法：

组合写法	按键组合
@keyup.alt.67=”function”	Alt + C
@click.ctrl=”function”	Ctrl + Click

示例：

created: function() {
      var _this = this;
      document.onkeydown = function(e) {
          let key = window.event.keyCode;
          if(key == 119){
             console.log('监听F8按键')
          }else if(key == 120){
             console.log('监听F9按键')
          }else if(key == 121){
             console.log('监听F10按键')
          }
      };
}

禁用键盘事件

//在methods中
showkey() {
     document.onkeydown = function() {
         console.log(window.event.returnValue);
         if (window.event.keyCode == 116) {
             window.event.returnValue = false;
         }
         console.log(window.event.returnValue);
     };
},
//mounted中调用
mounted () {
    this.showkey()
}