vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)

简介: vue 全局响应键盘按键/监听键盘事件(含 js 获取键盘keyCode值的方法)

监听键盘事件

方法一

document.addEventListener("keydown",function(e){
    alert("您按下的按钮的keyCode为:"+e.keyCode)
})

方法二

document.onkeydown = function (e) {
    // 方向键--上
    if (e.keyCode == 38) {
        alert("按下了方向键--上")
    }
    // 方向键--下
    if (e.keyCode == 40) {
        alert("按下了方向键--下")
    }
    // 方向键--左
    if (e.keyCode == 37) {
        alert("按下了方向键--左")
    }
    // 方向键--右
    if (e.keyCode == 39) {
        alert("按下了方向键--右")
    }
}

注意this的使用

调用methods的方法时,最好使用that,因为this在子路由或子组件中不能直接获取到

let that = this
document.addEventListener("keydown",function(e){
    // 方向键--上
    if (e.keyCode == 38) {
        // 执行向上移动的方法
        that.moveUP()
    }
})

js 获取键盘keyCode值的方法

使用下方代码,可以在按下键盘时,即刻了解键盘对应的keyCode值

document.addEventListener("keydown",function(e){
    alert("您按下的按钮的keyCode为:"+e.keyCode)
})

查表获取键盘keyCode值

当然,也可以通过查表找到键盘对应的keyCode值

字符键盘

按键 键值 按键 键值 按键 键值 按键 键值
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 90 8 56
I 73 R 82 0 48 9 57

数字键盘

按键 键值 按键 键值 按键 键值 按键 键值
0 96 8 104 F1 112 F9 120
1 97 9 105 F2 113 F10 121
2 98 * 106 F3 114 F11 122
3 99 + 107 F4 115 F12 123
4 100 Enter 108 F5 116
5 101 - 109 F6 117
6 102 . 110 F7 118
7 103 / 111 F8 119

控制键

按键 键值 按键 键值 按键 键值 按键 键值
Backspace 8 Esc 27 Right Arrow(->) 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 \| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up Arrow 38 ,< 188 "" 222
目录
相关文章
|
1天前
|
JavaScript
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
```markdown # CAD网页编程概览 - 使用mxcad库,实现CAD操作如删除、复制、镜像、移动和旋转。 - `erase()`方法删除实体,`clone()`配合`transformBy()`用于复制和编辑。 - `mirror()`和`transformBy(setMirror)`执行镜像操作,基于参考线。 - `move()`和`transformBy(setToTranslation)`实现移动功能。 - `rotate()`和`transformBy(setToRotation)`进行旋转,支持角度输入。 ```
网页CAD(JS Vue 预览dwg)如何二次开发常用的CAD编辑功能
|
2天前
|
JavaScript 前端开发 容器
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
vue组件封装——固定宽高比的容器(2种方法:纯CSS实现 + JS实现)
8 2
|
2天前
|
前端开发 JavaScript
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
js 等待接口访问成功后执行指定代码【3种方法】(含async await Promise的使用)
6 1
|
1天前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
16 3
|
1天前
|
JavaScript
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
JS 数组去重(含简单数组去重【5种方法】、对象数组去重【2种方法】)
7 0
|
1天前
|
JavaScript
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
js 内建对象的拓展 shim/polyfill ( 内含js 判断对象的属性是否存在的方法)
3 0
|
1天前
|
JavaScript 前端开发 UED
|
2天前
|
JavaScript 前端开发 Java
JavaScript中的hasOwnProperty方法详解
JavaScript中的hasOwnProperty方法详解
|
2天前
|
JavaScript
Eslint.js文件Vue中没有,如何修改配置
Eslint.js文件Vue中没有,如何修改配置
|
2天前
|
JavaScript
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
js document.compatMode【详解】(含准确获取浏览器宽高等尺寸的方法)
8 0