【Vue】13 Vue技术—— Vue 中的键盘事件处理详解
文章目录
- 前言
- 一、基础用法：监听键盘事件
- 二、常用按键别名
- 三、系统修饰键的组合使用
- 四、自定义按键别名与非标准按键
- 五、实战代码解析
前言
在 Web 开发中，键盘事件是提升用户体验的重要交互方式。Vue.js 提供了强大且简洁的语法来处理键盘事件，使得开发者能够轻松实现如“回车搜索”、“快捷键操作”等功能。本文将结合具体代码，深入解析 Vue 中键盘事件的使用技巧。
键盘事件学习官网：
https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/keyCode
一、基础用法：监听键盘事件
Vue 通过v-on指令（或简写@）来监听 DOM 事件，对于键盘事件，主要使用keydown和keyup。
@keydown：当用户按下键盘上的任意键时触发。@keyup：当用户释放键盘上的键时触发。
在实际开发中，我们往往不需要监听所有的按键，而是关注特定的按键。Vue 为此提供了按键别名，让代码更具可读性。
二、常用按键别名
为了方便开发，Vue 为一些常用的按键提供了内置的别名，无需记忆复杂的 keyCode 值。
- 回车键：
.enter - 删除键：
.delete(同时捕获“Delete”和“Backspace”键) - 退出键：
.esc - 空格键：
.space - 换行/制表键：
.tab(需要注意的是，.tab键会移动焦点，通常建议配合@keydown使用，或者在处理函数中阻止默认行为) - 方向键：
.up、.down、.left、.right
代码示例：
<!-- 监听回车键 --><input@keyup.enter="submitForm"placeholder="按下回车提交"><!-- 监听删除键 --><input@keydown.delete="handleDelete"placeholder="按下删除键触发"><!-- 监听空格键 --><input@keyup.space="handleSpace"placeholder="按下空格键触发">三、系统修饰键的组合使用
除了普通按键，我们经常需要实现如“Ctrl + S”保存、“Alt + F4”关闭等快捷键功能。Vue 提供了.ctrl、.alt、.shift、.meta(Mac 下的 Command 键) 等系统修饰键别名。
需要注意的用法差异：
- 配合
@keyup使用：按下修饰键（如 Ctrl）的同时，再按下另一个键（如 S），随后释放 S 键时，事件才会被触发。 - 配合
@keydown使用：正常触发事件，无需遵循上述特殊规则。
代码示例：
<!-- Ctrl + 点击 --><div@click.ctrl="doSomething">只有按下 Ctrl 键点击我才会触发</div><!-- Ctrl + S 快捷键保存 --><input@keyup.ctrl.s="saveContent"placeholder="按下 Ctrl+S 保存">四、自定义按键别名与非标准按键
对于 Vue 没有提供别名的按键，我们可以使用按键原始的key值进行绑定，但需要注意将其转换为 kebab-case（短横线命名）格式。此外，Vue 也支持通过Vue.config.keyCodes自定义按键别名（虽然在现代浏览器中不推荐使用 keyCode，但在特定兼容性需求下仍可使用）。
自定义 F1 帮助键示例：
// 定义自定义按键别名Vue.config.keyCodes.f1=112;// 在模板中使用<input @keyup.f1="showHelp"placeholder="按下 F1 显示帮助">五、实战代码解析
让我们来看一个完整的示例，结合了上述知识点：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>键盘事件</title><!-- 引入Vue --><scripttype="text/javascript"src="../js/vue.js"></script></head><body><!-- 1. Vue中常用的按键别名： 回车 => enter 删除 => delete（捕获“删除”和“退格”键） 退出 => esc 空格 => space 换行 => tab（特别||必须配合keydown去使用） 上 => up 下 => down 左 => left 右 => right 2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名） 3. 系统修饰键（用法特殊）: ctrl、alt、shift、meta (1). 配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。 (2). 配合keydown使用：正常触发事件。 4. 也可以使用keyCode去指定具体的按键（不推荐） 5. Vue.config.keyCode自定义键名 = 键码，可以去定制按键别名 --><!-- 准备好一个容器 --><divid="root"><h2>欢迎来到{{name}}学习</h2><inputtype="text"placeholder="按下回车提示输入"@keyup.enter="showInfo"></div><scripttype="text/javascript">Vue.config.productionTip=false// 阻止Vue在启动时产生生产提示constvm=newVue({el:'#root',data:{name:'上高山'},methods:{showInfo(e){// if(e.keycode !== 13) returnconsole.log(e.target.value)}}})</script></body></html>代码分析：
- 模板部分：在
<input>元素上绑定了@keyup.enter事件，这意味着只有当用户释放回车键时，才会触发showInfo方法。 - 脚本部分：在
methods中定义了showInfo函数，通过事件对象e的target.value属性获取输入框的当前值并打印到控制台。
通过合理运用 Vue 的键盘事件修饰符，我们可以写出更加清晰、健壮的交互代码，极大地提升开发效率和用户体验。