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 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
1月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
133 52
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
9天前
|
JavaScript 前端开发
捕获键盘输入和输入组合键的js库hotkeys
捕获键盘输入和输入组合键的js库hotkeys
|
1月前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
47 5
|
1月前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
27 1
|
1月前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
46 7
|
1月前
|
JavaScript 前端开发 开发者
JavaScript框架React vs. Vue:一场性能与易用性的较量
JavaScript框架React vs. Vue:一场性能与易用性的较量
37 0