Vue框架学习笔记——键盘事件

￡神魔★判官ぃ 2024-02-17 10:30 19阅读 0赞

#### 文章目录 ####

*  前文提要
 *  键盘事件（并不是所有按键都能绑定键盘事件）
 *   *  常用的按键
     *  不同的tab和四个按键
     *  keyCode绑定键盘事件（不推荐）
     *  Vue.config.keyCode.自定义键名 = 键码
 *  神奇的猜想
 *   *  div标签和click.enter
     *  button标签和click.enter

--------------------

## 前文提要 ##

本人仅做个人学习记录，如有错误，请多包涵

--------------------

## 键盘事件（并不是所有按键都能绑定键盘事件） ##

如何设置键盘事件，代码如下（keydown可以改为keyup）：

<body>
      <div id="box">
        键盘事件：<input type="text" @keydown.enter="showInfo">
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo() {
          
              console.log('触发了')
            }
          }
        })
      </script>
    </body>

当你点击输入框之后，按下回车键，就会在控制台输出’触发了’  
![在这里插入图片描述][7232ade17bb24afe81cd6cb0e4ac844a.png]

### 常用的按键 ###

![在这里插入图片描述][443873de3f234c81860120fc2d8ecf7c.png]

回车已经介绍过了，如果你将上文代码中的enter改为delete，那么当你选中了输入框的时候，按下backspace（退格）和delete（删除）都会触发键盘事件。

### 不同的tab和四个按键 ###

其中tab键有所不同，你使用keyup触发事件是无效的，只能使用keyup  
同样特殊的还有一下四个按键。  
![在这里插入图片描述][007683d3747246599450d34b7a73fd28.png]  
验证代码如下：  
![dc8e9e4e95d442e289be923a9579c614.png][]  
当你选中输入框，按下和松开alt的时候并不会触发键盘事件。  
当你按住alt，并且按下其他按键的时候，才会触发键盘事件，调用回调函数。  
![在这里插入图片描述][502b4d5ab99a4e3280cdc1f9cc2c2b69.png]

### keyCode绑定键盘事件（不推荐） ###

当你不知道这个按键的名字的时候，也可以用按键对应的数值来绑定键盘事件  
可以通过下述代码获取按键对应的keyCode，代码如下：

<body>
      <div id="box">
        键盘事件：<input type="text" @keydown.caps-lock="showInfo">
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo() {
          
              console.log(event.key,event.keyCode)
            }
          }
        })
      </script>
    </body>

向CapLock这种由两个单词组成的按键，需要将单词首字母全部变为小写，且用’-'隔开才能使用。

![在这里插入图片描述][7e39dd4339464a559b1579eb3ce6ad6a.png]  
有图可知，这个CapsLock按键对应的key值是20，我们也就可以用如下代码代替上文代码中的这个部分，也可以起到相同的效果。  
但是不推荐，因为key值是被废弃的特性，可以在该链接中看见：  
[KeyboardEvent.keyCode][]  
![在这里插入图片描述][e220ac9c52d9444f88b147661facfea2.png]  
keyCode绑定键盘事件，代码如下：

![在这里插入图片描述][97bcfe175a8c4a19ae99a3440a5b1a4a.png]

### Vue.config.keyCode.自定义键名 = 键码 ###

建码就是按键对应的keyCode，enter（回车）对应13。

代码如下：

<body>
      <div id="box">
        键盘事件：<input type="text" @keydown.huiche="showInfo">
      </div>
      <script type="text/javascript">
        Vue.config.productionTip = false
        const vm = new Vue({
          
          el: '#box',
          methods: {
          
            showInfo() {
          
              console.log(event.key,event.keyCode)
            }
          }
        })
        Vue.config.keyCodes.huiche = 13;
      </script>
    </body>

自定义键名’huiche’，使得输入框绑定回车键

![在这里插入图片描述][317d65188b8d42378cb6e80e5a15f6aa.png]

## 神奇的猜想 ##

### div标签和click.enter ###

<div @click.enter="showInfo" style="background-color:red">点我触发事件</div>

鼠标点击div标签，触发事件：  
![在这里插入图片描述][655959874a2146da86a932c1b56e0a49.png]  
此时，按下或是按住都不会触发键盘事件，都不会在控制台输出’触发了’

### button标签和click.enter ###

如果将代码改为：

<button @click.enter="showInfo">点我触发事件</button>

鼠标点击按钮，能够触发事件：  
![在这里插入图片描述][7ad3574c7ad84f32a7240552a46d0b1c.png]  
这很正常，因为触发了鼠标点击事件。  
如果你的鼠标放在按钮以外的位置，按下回车键的时候，无法在控制台输出1，这很正常。  
但是如果，你把鼠标放在按钮之上（不点击，只是放着），按下回车键，则会触发事件，在控制台输出1，这就不是很正常了。

所以，**键盘事件最好还是配合keydown和keyup这些事件进行使用**。  
且这些元素能够被“选中”，能够让系统知道你此时选择了这个元素。

--------------------

至此，结束。

`如果你觉得这篇文章写的不错，多多点赞~收藏吧！`

[7232ade17bb24afe81cd6cb0e4ac844a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/a193ebf202f549b8b3d53a701d02d583.png
[443873de3f234c81860120fc2d8ecf7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/dbb22ac28b954b9c8ae877c72dccc705.png
[007683d3747246599450d34b7a73fd28.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/765eae21e0ef43b3bcf79c3202dd0139.png
[dc8e9e4e95d442e289be923a9579c614.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/765aee8e9f08475c8bbf396369d94e8e.png
[502b4d5ab99a4e3280cdc1f9cc2c2b69.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/887a17f159d34fea93321fe4958c24c5.png
[7e39dd4339464a559b1579eb3ce6ad6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/4c6901c727104bae873dfa5f3c0d11e6.png
[KeyboardEvent.keyCode]: https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode
[e220ac9c52d9444f88b147661facfea2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/19085f3d31e7460698a0778820397778.png
[97bcfe175a8c4a19ae99a3440a5b1a4a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/bc75839decac4e1ab08d8a0eab60535e.png
[317d65188b8d42378cb6e80e5a15f6aa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/bce63a6d6edc4815b54998b0106307eb.png
[655959874a2146da86a932c1b56e0a49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/632334815e404bc2a7d7799f50f18af6.png
[7ad3574c7ad84f32a7240552a46d0b1c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/32448b6c01bf4a549f4ebf9173ac2c0b.png