发门网
从入门到项目实战 - Vue 键盘事件
创始人
2024-05-01 00:10:13
0次


Vue 中键盘事件的使用

上一节：《 Vue 事件处理 》 | 下一节：《 Vue 中鼠标事件的使用 》
jcLee95
邮箱 ：291148484@163.com
CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
本文地址：https://blog.csdn.net/qq_28550263/article/details/127346037
目 录

1. 概述

2. JavaScript 键盘事件

  • 2.1 键盘事件类型
    • 2.1.1 keydown 事件
    • 2.1.2 keypress 事件
    • 2.1.3 keyup 事件
    • 2.1.4 input 事件
  • 2.2 键盘事件的响应顺序

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

  • 3.1 获取按键的 键码（keyCode）
  • 3.2 监听按键事件

4. Vue 按键修饰符

  • 4.1 按键别名
  • 4.2 系统按键修饰符
  • 4.3 自定义按键修饰符
    • 4.3.1 Vue2 中自定义按键修饰符
    • 4.3.2 Vue3已弃用自定义按键修饰符

1. 概述

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

2. JavaScript 键盘事件

2.1 键盘事件类型

2.1.1 keydown 事件

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

你也可以通过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 事件在按键被松开时触发。

例如：

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

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

[Note]：
keydown 和 keyup 事件提供指出哪个键被按下的代码，而 keypress 指出哪些字符被输入。
例如，小写字母“a”在 keydown 和 keyup 时会被报告为 65，但在 keypress 时为 97。所有事件均将大写字母“A”报告为 65。

2.1.4 input 事件

当一个 ,