【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

代码示例：

html 复制代码

<!-- 监听回车键 -->
<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 使用：正常触发事件，无需遵循上述特殊规则。

代码示例：

html 复制代码

<!-- 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 帮助键示例：

javascript 复制代码

// 定义自定义按键别名
Vue.config.keyCodes.f1 = 112;

// 在模板中使用
<input @keyup.f1="showHelp" placeholder="按下 F1 显示帮助">

五、实战代码解析

让我们来看一个完整的示例，结合了上述知识点：

html 复制代码

<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8"/>
        <title>键盘事件</title>
        <!-- 引入Vue -->
        <script type="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自定义键名 = 键码，可以去定制按键别名 -->

        <!-- 准备好一个容器 -->
        <div id="root">
            <h2>欢迎来到{{name}}学习</h2>
           
            <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
        </div>

         <script type="text/javascript">
            Vue.config.productionTip = false // 阻止Vue在启动时产生生产提示

            
            const vm = new Vue({
                el:'#root',
                data:{
                    name:'上高山'
                },
                methods:{
                    showInfo(e){
                        // if(e.keycode !== 13) return
                        console.log(e.target.value)
                    }
                }

            })
         </script>
    </body>
</html>

代码分析：

模板部分 ：在 <input> 元素上绑定了 @keyup.enter 事件，这意味着只有当用户释放回车键时，才会触发 showInfo 方法。
脚本部分 ：在 methods 中定义了 showInfo 函数，通过事件对象 e 的 target.value 属性获取输入框的当前值并打印到控制台。

通过合理运用 Vue 的键盘事件修饰符，我们可以写出更加清晰、健壮的交互代码，极大地提升开发效率和用户体验。