154 lines
3.3 KiB
Markdown
154 lines
3.3 KiB
Markdown
# Vue2 键盘事件处理文档
|
||
|
||
## 一、基本概念
|
||
|
||
Vue2 提供了对键盘事件的支持，允许开发者监听特定的按键操作。本示例展示了如何自定义键盘事件别名并处理回车键事件。
|
||
|
||
## 二、代码示例解析
|
||
|
||
```html
|
||
<div id="app">
|
||
键盘事件：<input type="text" @keydown.huiche="showinfo">
|
||
</div>
|
||
|
||
<script>
|
||
// 自定义按键别名
|
||
Vue.config.keyCodes.huiche = 13; // 13是回车键的keyCode
|
||
|
||
new Vue({
|
||
el: "#app",
|
||
methods: {
|
||
showinfo() {
|
||
alert("回车键被按下");
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
```
|
||
|
||
## 三、核心机制说明
|
||
|
||
### 1. 键盘事件绑定语法
|
||
|
||
| 语法形式 | 示例 | 说明 |
|
||
| ---------- | --------------------------- | ------------------ |
|
||
| 基础写法 | `@keydown="handler"` | 监听所有按键 |
|
||
| 按键修饰符 | `@keydown.enter="handler"` | 仅监听回车键 |
|
||
| 自定义别名 | `@keydown.huiche="handler"` | 使用自定义按键别名 |
|
||
|
||
### 2. 按键修饰符类型
|
||
|
||
Vue 提供了这些常用内置按键别名：
|
||
- `.enter`
|
||
- `.tab`
|
||
- `.delete` (捕获"删除"和"退格"键)
|
||
- `.esc`
|
||
- `.space`
|
||
- `.up`
|
||
- `.down`
|
||
- `.left`
|
||
- `.right`
|
||
|
||
### 3. 自定义按键别名
|
||
|
||
通过 `Vue.config.keyCodes` 对象添加：
|
||
```javascript
|
||
// 语法
|
||
Vue.config.keyCodes.自定义名称 = 按键keyCode;
|
||
|
||
// 示例：将F1键(112)别名为help
|
||
Vue.config.keyCodes.help = 112;
|
||
```
|
||
|
||
## 四、键盘事件对象
|
||
|
||
在方法中可以访问原生事件对象：
|
||
```javascript
|
||
methods: {
|
||
showinfo(event) {
|
||
console.log(event.key); // 按键名称（如'Enter'）
|
||
console.log(event.keyCode); // 按键代码（如13）
|
||
console.log(event.target); // 触发事件的元素
|
||
}
|
||
}
|
||
```
|
||
|
||
## 五、最佳实践建议
|
||
|
||
1. **优先使用内置别名**：
|
||
- 提高代码可读性
|
||
- 避免记忆keyCode数字
|
||
|
||
2. **复杂按键组合**：
|
||
```html
|
||
<!-- Ctrl + Enter -->
|
||
<input @keydown.ctrl.enter="submit">
|
||
|
||
<!-- Alt + C -->
|
||
<input @keydown.alt.67="copy">
|
||
```
|
||
|
||
3. **系统修饰键**：
|
||
- `.ctrl`
|
||
- `.alt`
|
||
- `.shift`
|
||
- `.meta` (Mac是Command键，Windows是Windows键)
|
||
|
||
## 六、扩展应用
|
||
|
||
### 1. 自动聚焦示例
|
||
```html
|
||
<input @keyup.enter="nextInput" ref="currentInput">
|
||
|
||
methods: {
|
||
nextInput() {
|
||
this.$refs.nextInput.focus();
|
||
}
|
||
}
|
||
```
|
||
|
||
### 2. 表单提交优化
|
||
```html
|
||
<form @submit.prevent>
|
||
<input @keyup.enter="submit">
|
||
<button @click="submit">提交</button>
|
||
</form>
|
||
```
|
||
|
||
### 3. 游戏控制示例
|
||
```javascript
|
||
// 监听方向键控制游戏角色
|
||
created() {
|
||
window.addEventListener('keyup', this.handleKeyup);
|
||
},
|
||
methods: {
|
||
handleKeyup(e) {
|
||
switch(e.keyCode) {
|
||
case 37: this.moveLeft(); break;
|
||
case 38: this.moveUp(); break;
|
||
// ...
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 七、注意事项
|
||
|
||
1. **keyCode已废弃**：
|
||
- 现代浏览器建议使用 `event.key` 代替
|
||
- Vue3 已移除对keyCode的支持
|
||
|
||
2. **输入法问题**：
|
||
- 某些输入法下可能无法正确触发事件
|
||
- 中文输入时考虑使用 `@keyup` 代替 `@keydown`
|
||
|
||
3. **移动端适配**：
|
||
- 虚拟键盘行为可能不一致
|
||
- 建议配合触摸事件使用
|
||
|
||
4. **事件冒泡**：
|
||
- 使用 `.stop` 修饰符阻止冒泡
|
||
```html
|
||
<div @keydown.enter.stop="handleEnter">
|
||
```
|