vue禁用键盘上某个按键

我家二爷

于 2024-02-19 09:08:41 发布

阅读量780

点赞数 24

文章标签： vue.js 计算机外设 javascript

本文链接：https://blog.csdn.net/Guanerye0314/article/details/136162489

版权

mounted(){

this.showkey()

},

created: function() {

document.onkeydown = function() {

let key = window.event.keyCode;

if(key == 122) return false //禁用f11按键

};

},

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

}