从入门到项目实战 - Vue 键盘事件

简介: 本文介绍 Vue2 与 Vue3中 键盘事件 的用法

Vue 中键盘事件的使用

上一节:《 Vue 事件处理 | 下一节:《 Vue 中鼠标事件的使用


jcLee95

已入驻阿里云博客

邮箱 :291148484@163.com
本文地址
- https://developer.aliyun.com/article/
- https://blog.csdn.net/qq_28550263/article/details/127346037

目 录


1. 概述

2. JavaScript 键盘事件

3. Vue 键盘事件监听与处理

4. Vue 按键修饰符


1. 概述

在监听键盘事件时,我们经常需要检查特定的按键。

2. JavaScript 键盘事件

2.1 键盘事件类型

2.1.1 keydown 事件

keydown事件在键盘按键按下的时候触发。

例如:

<input placeholder="Press down a key." size="40">
<script>
const eventTarget = document.querySelector('input');
eventTarget.addEventListener("keydown", e => {
  console.log(`${e.code}`)
});
</script>

你也可以通过DOM元素的 onkeydown 属性来定义 keydown 事件的回调函数:

const eventTarget = document.querySelector('input');
eventTarget.keydown = (e)=>{
  console.log(`${e.code}`)
}

2.1.2 keypress 事件

当某个键被按下并且该键通常产生一个字符值(使用input代替)时,将触发keypress事件。

2.1.3 keyup 事件

keyup 事件在按键被松开时触发。

例如:

<input placeholder="Press and release a key." size="40">
<script>
const eventTarget = document.querySelector('input');
eventTarget.addEventListener("keyup", e => {
  console.log(`${e.code}`)
});
</script>

你也可以通过DOM元素的 onkeyup 属性来定义 keyup 事件的回调函数:

const eventTarget = document.querySelector('input');
eventTarget.keyup = (e)=>{
  console.log(`${e.code}`)
}

[Note]

keydownkeyup 事件提供指出哪个键被按下的代码,而 keypress 指出哪些字符被输入。

例如,小写字母“a”在 keydownkeyup 时会被报告为 65,但在 keypress 时为 97。所有事件均将大写字母“A”报告为 65。

2.1.4 input 事件

当一个 <input>, <select>, 或 <textarea> 元素,以及 contenteditable = true 元素、document.designMode='on' 文档的 value 被修改时,会触发 input 事件。

  • 对于 type=checkbox 或 type=radio 的 input 元素,每当用户切换控件(通过触摸、鼠标或键盘)时,input 事件都应该触发。然而,历史事实并非如此。请检查兼容性,或使用 change 事件代替这些类型的元素。
  • 在contenteditable 和 designMode 的情况下,事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上,当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

例如:

<input placeholder="Enter some text" name="name"/>
<script>
const eventTarget = document.querySelector('input');
eventTarget.addEventListener('input', (e)=>{
  console.log(e.srcElement.value);
});
</script>

当然你也可以使用 DOM 的 oninput 属性来指定回调:

const eventTarget = document.querySelector('input');
eventTarget.oninput = (e)=>{
  console.log(e.srcElement.value);
}

2.2 键盘事件的响应顺序

当按下键盘时,将连续触发多个事件。

  1. 对于一次普通字符从按下到释放的过程中,其按键事件响应顺序为:
    keydown => keypress => input => keyup
  2. 对于非字符键,如 CtrlBackspace等,键盘事件的相应顺序为:keydown => keyup。(而 keypressinput 不会触发)。
  3. 对于 Enter,键盘事件的相应顺序为:keydown => keypress =>keyup
  4. 若按下某个普通字符键不放,则 keydown 和 keypress 事件将逐个持续发生,直至松开按键:6666666666666.png
  5. 如果按下非字符键(非Enter)不放,则只有 keydown 事件持续发生,直至松开按键:6666666666666.png
  6. 上图中,按下 Ctrl 时,不断触发 keydown 事件,松开时,触发 keyup 事件。
  7. 如果持续按下 Enter 键放开,则 keydownkeypress 事件将逐个持续发生,直至松开按键时,触发 keyup 事件:6666666666666.png

3. Vue 键盘事件监听与处理

3.1 获取按键的 键码(keyCode)

可以通过数据双向绑定(v-model)绑定一个 keydown 事件来获取按键的键码:

<template>
  <input v-model="msg" @keydown="keydown" placeholder="Enter key" name="name"/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  setup(props){
    const msg='';
    return {
      msg:msg
    }
  },
  methods:{
    keydown(event:any){
      console.log(event.keyCode);
    }
  }
})
</script>

6666666666666.png

常用键码:

a 65 Ctrl 17 Backspace 8
b 66 Caps 20 delete 46
Shift 16 End 35
z 99 Alt 18 Insert 45
Fn 93 | 220 / 111
Num 144 * 106 -(小键盘) 109
` 192 Enter 13 ( 57
Window 91 Pause 19 ) 48
@ 50 # 51 $ 52
% 53 ^ 54 & 55
- 189 = 187 ; 186
' 222 .(小键盘) 110 . 190
0 48 0 (小键盘) 96 F1 112
1 49 1 (小键盘) 97 F2 113
9 57 9 (小键盘) 105 F12 123

3.2 监听按键事件

vue 提供了一种便利的方式来监听按键事件,只需要在被监听的DOM元素上使用 v-on 指令指定按键事件、按键 以及 事件的回调函数,例如:

<input v-on:keyup.13="submit" />

该指令可以使用 @ 语法糖写成以下简写形式:

<input @keyup.13="submit" />

其中 keyup 表示按键事件为keyup13 表示按键的键值为 13 ,也就是 Enter 键。Vue 为该键提供了别名.enter,因此.13也可写成.enter。关于按键别名,在 4.1 按键别名 将会进一步介绍。

submit 是回调函数名,这个函数需要在methods(当使用选项式API时)中定义。

对于回调函数,我们是可以传入参数的。但是如果我们不在调用时传入参数,则默认传入一个参数enent。你也可以手动传入第一个参数,使用 $event,比如:

<input v-model="msg" @keydown="submit($event)" placeholder="Enter key" name="name"/>

如果需要在回调函数中使用,则在声明时需要用一个标识符去接受这个参数。比如:

submit(event){
  // 阻止默认事件 
  event.preventDefault();
}

当然,这个案例中,要想阻止默认事件可以像其它 vue 事件一样,使用 .prevent 修饰,vue将自动调用event.preventDefault();,即:

<input v-model="msg" @keydown.prevent="submit($event)"/>

4. Vue 按键修饰符

4.1 按键别名

Vue 为一些常用的按键提供了别名:

.enter.tab.delete.esc.space.up.down.left.rightpage-uppage-down等等。

其中: .delete 捕获“Delete”和“Backspace”两个按键。

例如:

<input @keyup.enter="submit" />

这相当于:

<input v-on:keyup.13="submit">

4.2 系统按键修饰符

Vue 允许在 v-on 或 @ 监听按键事件时添加 按键修饰符 。我们可以使用以下 系统按键修饰符 来触发鼠标或键盘事件监听器,只有当相应按键被按下时才会触发。

系统按键修饰符和常规按键不同。与 keyup 事件一起使用时,该按键必须在事件发出时处于按下状态。换句话说,keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

.ctrl
.alt
.shift
.meta

例如:

<input @keyup.alt.enter="clear" />

4.3 自定义按键修饰符

使用按键的别名给了我们很多方便,但 vue 中也并没有对所有按键都定义别名。不过好在 vue 为我们提供了一种通过全局 config.keyCodes 来定义按键修饰符别名的方法。

4.3.1 Vue2 中自定义按键修饰符

在 Vue2 中,定义的格式为:

Vue.config.keyCodes.别名 = 键码;

需要注意的是,我们必须在创建 Vue 对象实例(vm)前定义。例如我们可以在 main.js 中:

Vue.config.keyCodes.f2 = 113;
let vm = new Vue{{
 // 配置项...
}}

4.3.2 Vue3已弃用自定义按键修饰符

这一小节是为从 Vue2 迁移到 Vue3 而写的,在目前官方文档中暂时没有找到详细的介绍。 Vue3 中没有提供用于创建 vm 的 Vue 对象转而提供 createApp

import { createApp } from 'vue';
const app = createApp({
  // 配置项
})

事实上,Vue3中不再受支持 config.keyCodes。由于新的 JavaScript 标准中 KeyboardEvent.keyCode (点击链接参考MDN) 已被弃用,Vue 3 继续支持此功能也不再有意义。 废弃的 KeyboardEvent.keyCode 代表着一个唯一标识的所按下的键的未修改值,它依据于一个系统和实现相关的数字代码。它被 KeyboardEvent.code 属性替代,这个属性表示键盘上的物理键(与按键生成的字符相对),但是目前在一些浏览器中并未实现。

目录
相关文章
|
6天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
6天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
6天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
11天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客!我是一名自学了2年半前端的大一学生,熟悉JavaScript与Vue,目前正在向全栈方向发展。如果你从我的博客中有所收获,欢迎关注我,我将持续更新更多优质文章。你的支持是我最大的动力!🎉🎉🎉
|
11天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript和Vue的大一学生。自学前端2年半,熟悉JavaScript与Vue,正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
|
11天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
12天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
|
12天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中,合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法,有效提升应用的响应性和可维护性。
|
12天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化,但使用场景不同。`computed` 用于计算属性,依赖于其他数据自动更新;`watch` 用于监听数据变化,执行异步或复杂操作。
|
13天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
下一篇
无影云桌面