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

相关阅读:
Excel-快速将公式运用到一整列
 java 中文繁简体转换工具 opencc4j 使用介绍 1.8.0
LeetCode 热题 HOT 100 第七十六天 394. 字符串解码中等题用python3求解
 阿里云服务器的登录方法
 2022-08-25-RISC-V跃出IoT圈，高性能计算三分天下雏形初现-平头哥先“打样”了SoC原型芯片曳影1520（-JPG）
《Java基础入门第2版》--黑马程序员课后答案及其详解第1章 Java开发入门
 春节静态HTML网页作业模板传统节日文化网站设计作品静态学生网页设计作业简单网页制作
 按文件类型自动分类文件的快速方法
 力扣 593. 有效的正方形
 大橙子vfed 5.0去授权完美破解主题模版源码 | 苹果CMS
原文地址：https://blog.csdn.net/weixin_43228946/article/details/126613216