VUE的键盘事件

在VUE里面，我们可以通过event调出key和keyCode来获取按键名称和按键编码。就像下面这样的编码：
Control----17
Enter----13
Shift----16
ArrowUp----38
ArrowDown----40
ArrowLeft----37
ArrowRight----39
Backspace----8
Delete----46
Insert----45
[a-z]:[65-90]
[0-9]:[96-105]键盘右边的数字键盘
[48-57]
为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
回车 => enter
删除 => delete (捕获“删除”和“退格”键)
退出 => esc
空格 => space
换行 => tab (特殊，必须配合keydown去使用)
上 => up
下 => down
左 => left
右 => right
在上面基础，我们经常还要使用系统修饰符。可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器：
.ctrl
.alt
.shift
.meta
注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。
系统修饰符在使用的有两个注意事项，大家可以看下：
(1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
(2).配合keydown使用：正常触发事件。
在我们使用键盘的按键的时候，有一个按键我们需要注意下，那就是CapsLock按键，转换大小写，在使用的时候这样才行：

<input type="text" placeholder="按下回车提示输入keyup" @keyup.caps-lock="show1">
1

有时候，我们需要给按键设置别名，我们可以这样处理，下面就以回车按键作为例子：

Vue.config.keyCodes.huiche = 13 //给回车键（enter）定义了一个别名按键
1

<input type="text" placeholder="按下回车键设置别名" @keyup.huiche="show">
1

现在，我们可以看下完整的代码案例：

<!DOCTYPE html>
<html lang="en">

<head>
                  <meta charset="UTF-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1.0">
                  <title>键盘事件</title>
                  <script type="text/javascript" src="../vue_js/vue.js"></script>
</head>

<body>
                  <div id="demo">
                                    <input type="text" placeholder="显示按键的编码值" @keydown="showKeyCode">
                                    <br>
                                    <input type="text" placeholder="按下回车提示输入keydown" @keydown.huiche="show">
                                    <br>
                                    <input type="text" placeholder="按下回车提示输入keyup" @keyup="show1">
                                    <br>
                                    <input type="text" placeholder="按下回车提示输入keyup" @keyup.caps-lock="show1">
                                    <br>
                                    <input type="text" placeholder="按下回车提示输入ctrl+y才起作用" @keyup.ctrl.y="show1">
                                    <br>
                                    <input type="text" placeholder="按下回车键设置别名" @keyup.huiche="show">
                  </div>
                  <script>
                                    Vue.config.productionTip = false;
                                    Vue.config.keyCodes.huiche = 13 //给回车键（enter）定义了一个别名按键

                                    const vm = new Vue({
                                                      el: '#demo',
                                                      methods: {
                                                                                          /*
                                                                                             获取按键的编码
                                                                                             Control----17
                                                                                             Enter----13
                                                                                             Shift----16
                                                                                             ArrowUp----38
                                                                                             ArrowDown----40
                                                                                             ArrowLeft----37
                                                                                             ArrowRight----39
                                                                                             Backspace----8
                                                                                             Delete----46
                                                                                             Insert----45
                                                                                             [a-z]:[65-90]
                                                                                             [0-9]:[96-105]键盘右边的数字键盘
                                                                                                   [48-57]
                                                                                          */
                                                                        showKeyCode(e) {
                                                                                          console.log(e.key+"---"+e.keyCode);
                                                                        },
                                                                        show(e) {
                                                                                          console.log(e.target.value + "------" + e.key + "----" + e.keyCode);
                                                                        },
                                                                        show1(e) {
                                                                                          console.log(e.target.value + "----" + e.key + "----" + e.keyCode);
                                                                        }
                                                      }
                                    });

                  </script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

相关阅读:
分布式定时任务调度
 Gin+WebSocket实战——在线聊天室WebSocketDemo详细使用教程
 【总结】云集各大高校 — 数学建模经验分享（万字总结）
华为OD机试 - ABR 车路协同场景 - （Java 2023 B卷 100分）
win10系统的应用商店不见了怎么安装回来
 Linux笔记-3
2022-中医基础-《阴阳 20问与答》
基于 SpringBoot + Redis 实现分布式锁
 C++初阶--C++入门（2）
算术优化与阿奎拉鹰优化的混合算法
原文地址：https://blog.csdn.net/weixin_43228946/article/details/126613216