Vue中监听/禁用键盘事件

keyCode实际键值48到570到965到90a到z（A到Z）112到135F1到F248BackSpace（退格）9Tab13Enter（回车）20Caps_Lock（大写锁定）32Space（空格键）37Left（左箭头）38Up（上箭头）39Right（右箭头）40Down（下箭头）在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的..

今夜大风

7156人浏览 · 2021-11-03 16:38:29

今夜大风 · 2021-11-03 16:38:29 发布

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()
}