Vue中监听/禁用键盘事件
keyCode实际键值48到570到965到90a到z（A到Z）112到135F1到F248BackSpace（退格）9Tab13Enter（回车）20Caps_Lock（大写锁定）32Space（空格键）37Left（左箭头）38Up（上箭头）39Right（右箭头）40Down（下箭头）在Vue中，已经为常用的按键设置了别名，这样我们就无需再去匹配keyCode，直接使用别名就能监听按键的..
·
| 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()
}
前往低代码交流专区
更多推荐
5
0- 0
已为社区贡献2条内容
所有评论(0)