JavaScript 与 Vue 键盘事件全面指南(Composition API + ＜script setup＞)

键盘事件是Web交互的重要组成部分，本文将详细介绍如何在Vue 3中使用组合式API和<script setup>语法糖处理键盘事件。

一、JavaScript 原生键盘事件

JavaScript 提供了三种主要的键盘事件：

1. 键盘事件类型

• keydown：按下键盘按键时触发（按住会连续触发）
• keyup：释放键盘按键时触发
• keypress（已废弃，不推荐使用）：按下产生字符的按键时触发

document.addEventListener('keydown', function(event) {console.log('键按下:', event.key);
});document.addEventListener('keyup', function(event) {console.log('键释放:', event.key);
});

二、Vue 3中的键盘事件处理

1. 基本用法（组合式API）

<script setup>
import { ref } from 'vue'const inputValue = ref('')const handleKeyDown = (event) => {console.log('键按下:', event.key)
}const handleKeyUp = (event) => {console.log('键释放:', event.key)
}
</script><template><input v-model="inputValue"@keydown="handleKeyDown"@keyup="handleKeyUp"/>
</template>

2. 事件修饰符

Vue 3提供了方便的键盘事件修饰符：

<script setup>
const submitForm = () => {console.log('回车提交表单')
}const handleCtrlEnter = () => {console.log('Ctrl+Enter 组合键')
}
</script><template><!-- 回车键触发 --><input @keyup.enter="submitForm"><!-- Ctrl+Enter 组合键触发 --><input @keyup.ctrl.enter="handleCtrlEnter"><!-- 精确匹配 - 只有Ctrl键按下时触发 --><input @keyup.exact.ctrl="handleExactCtrl">
</template>

3. 常用按键修饰符

Vue 3内置了以下按键修饰符：

• .enter
• .tab
• .delete (包含Delete和Backspace)
• .esc
• .space
• .up
• .down
• .left
• .right

三、实用场景示例

1. 搜索框回车搜索

<script setup>
import { ref } from 'vue'const searchText = ref('')const search = () => {console.log('执行搜索:', searchText.value)// 这里添加搜索逻辑
}
</script><template><inputv-model="searchText"@keyup.enter="search"placeholder="输入关键词后按回车搜索"/>
</template>

2. 全局快捷键实现

<script setup>
import { onMounted, onBeforeUnmount } from 'vue'const saveContent = () => {console.log('保存内容')
}const closeModal = () => {console.log('关闭模态框')
}const handleGlobalKeyDown = (event) => {if (event.ctrlKey && event.key === 's') {event.preventDefault()saveContent()}if (event.key === 'Escape') {closeModal()}
}// 组件挂载时添加监听
onMounted(() => {window.addEventListener('keydown', handleGlobalKeyDown)
})// 组件卸载前移除监听
onBeforeUnmount(() => {window.removeEventListener('keydown', handleGlobalKeyDown)
})
</script>

3. 游戏控制示例

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'const playerPosition = ref({ x: 0, y: 0 })const handleGameControl = (event) => {switch(event.key) {case 'ArrowUp':playerPosition.value.y--breakcase 'ArrowDown':playerPosition.value.y++breakcase 'ArrowLeft':playerPosition.value.x--breakcase 'ArrowRight':playerPosition.value.x++break}console.log('当前位置:', playerPosition.value)
}onMounted(() => {window.addEventListener('keydown', handleGameControl)
})onBeforeUnmount(() => {window.removeEventListener('keydown', handleGameControl)
})
</script><template><div><p>玩家位置: X={{ playerPosition.x }}, Y={{ playerPosition.y }}</p><p>使用方向键移动</p></div>
</template>

四、高级技巧

1. 自定义按键修饰符

在Vue 3中，可以通过app.config.globalProperties添加全局按键修饰符：

// main.js
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)app.config.globalProperties.$keyCodes = {f1: 112,mediaPlayPause: 179
}app.mount('#app')

然后在组件中使用：

<script setup>
import { getCurrentInstance } from 'vue'const { proxy } = getCurrentInstance()const showHelp = () => {console.log('显示帮助')
}
</script><template><input @keyup.[proxy.$keyCodes.f1]="showHelp">
</template>

2. 组合式函数封装

可以将键盘逻辑封装为可复用的组合式函数：

// useKeyboard.js
import { onMounted, onBeforeUnmount } from 'vue'export function useKeyboardShortcut(key, callback) {const handler = (event) => {if (event.key === key) {callback(event)}}onMounted(() => {window.addEventListener('keydown', handler)})onBeforeUnmount(() => {window.removeEventListener('keydown', handler)})
}

在组件中使用：

<script setup>
import { useKeyboardShortcut } from './useKeyboard'useKeyboardShortcut('Escape', () => {console.log('ESC键被按下')
})
</script>

五、注意事项

1. 移动端兼容性：移动设备键盘事件可能有不同表现
2. 输入法问题：使用输入法时，keydown/keyup事件可能不符合预期
3. 性能优化：频繁触发的keydown事件中避免复杂逻辑
4. 事件清理：全局事件务必在组件卸载时移除监听器
5. 修饰键检测：使用event.ctrlKey/event.shiftKey等检测修饰键状态
6. 事件冒泡：注意键盘事件会冒泡，可使用.stop修饰符阻止

六、总结

Vue 3的组合式API和<script setup>语法糖为键盘事件处理提供了更简洁、更灵活的方式：

1. 使用@keydown和@keyup绑定事件处理函数
2. 利用内置修饰符简化常见按键检测
3. 通过组合式函数封装可复用的键盘逻辑
4. 注意生命周期管理，及时清理事件监听
5. 考虑封装自定义键盘逻辑hook提高代码复用性

通过合理使用这些特性，可以构建出响应迅速、交互丰富的Vue 3应用。

希望本指南能帮助你更好地在Vue 3项目中处理键盘事件！

创作不易，如果您都看到这里了，可以给我一个点赞、收藏并关注一下么？您的支持与喜爱是激励我创作的最大动力！

如果内容有误请及时联系我进行修改！