vue-java-tutorials/vue2-tutorials/import-script/7-键盘事件.md

Vue2 键盘事件处理文档

一、基本概念

Vue2 提供了对键盘事件的支持，允许开发者监听特定的按键操作。本示例展示了如何自定义键盘事件别名并处理回车键事件。

二、代码示例解析

<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 对象添加：

// 语法
Vue.config.keyCodes.自定义名称 = 按键keyCode;

// 示例：将F1键(112)别名为help
Vue.config.keyCodes.help = 112;

四、键盘事件对象

在方法中可以访问原生事件对象：

methods: {
    showinfo(event) {
        console.log(event.key);      // 按键名称（如'Enter'）
        console.log(event.keyCode); // 按键代码（如13）
        console.log(event.target);  // 触发事件的元素
    }
}

五、最佳实践建议

1. 优先使用内置别名：

   • 提高代码可读性
   • 避免记忆keyCode数字

2. 复杂按键组合：

   <!-- Ctrl + Enter -->
   <input @keydown.ctrl.enter="submit">
   
   <!-- Alt + C -->
   <input @keydown.alt.67="copy">
   

3. 系统修饰键：

   • .ctrl
   • .alt
   • .shift
   • .meta (Mac是Command键，Windows是Windows键)

六、扩展应用

1. 自动聚焦示例

<input @keyup.enter="nextInput" ref="currentInput">

methods: {
    nextInput() {
        this.$refs.nextInput.focus();
    }
}

2. 表单提交优化

<form @submit.prevent>
    <input @keyup.enter="submit">
    <button @click="submit">提交</button>
</form>

3. 游戏控制示例

// 监听方向键控制游戏角色
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 修饰符阻止冒泡

   <div @keydown.enter.stop="handleEnter">