v-textarea获焦时v-shortkey插件快捷键失效问题求解决方案

问题根源 #

当<v-textarea>获取焦点后，键盘事件会被输入框优先捕获，而v-shortkey默认绑定在<v-btn>元素上，无法响应输入框内的按键事件，导致快捷键失效。

可行解决方案 #

方案1：使用v-shortkey的全局监听配置

修改v-shortkey指令，添加:global="true"属性，让快捷键全局生效，不受当前焦点元素影响。同时修正代码中第二个按钮的指令笔误（v-shortcut改为v-shortkey）：

<template>
    <div>
        <v-textarea ... />
        <div>
            <v-btn
             v-shortkey="['esc']"
             :global="true"
             @shortkey="abort"
            >
            ...
            </v-btn>
             <v-btn
              v-shortkey="['alt', 'enter']"
              :global="true"
              @shortkey="confirm"
             >
             </v-btn>
        </div>
    </div>
</template>

优点：代码改动最小，利用插件原生能力实现；缺点：全局快捷键可能与其他组件的快捷键产生冲突。

方案2：直接在v-textarea上绑定键盘事件

给<v-textarea>添加原生键盘事件监听，针对性处理目标按键：

<template>
    <div>
        <v-textarea 
          ...
          @keydown.esc="abort"
          @keydown.alt.enter="confirm"
        />
        <div>
            <v-btn
             v-shortkey="['esc']"
             @shortkey="abort"
            >
            ...
            </v-btn>
             <v-btn
              v-shortkey="['alt', 'enter']"
              @shortkey="confirm"
             >
             </v-btn>
        </div>
    </div>
</template>

优点：仅在目标输入框内生效，不会干扰全局；缺点：需要重复编写按键逻辑，维护成本略高。

方案3：自定义全局键盘事件监听

在组件生命周期中手动绑定/移除全局键盘事件，完全自定义按键处理逻辑：

<script>
export default {
    mounted() {
        document.addEventListener('keydown', this.handleGlobalKeydown)
    },
    destroyed() {
        document.removeEventListener('keydown', this.handleGlobalKeydown)
    },
    methods: {
        abort() {
            console.log('aborted')
        },
        confirm() {
            console.log('confirmed')
        },
        handleGlobalKeydown(e) {
            // 处理ESC键，可选阻止默认行为
            if (e.key === 'Escape') {
                e.preventDefault()
                this.abort()
            }
            // 处理Alt+Enter组合键
            if (e.altKey && e.key === 'Enter') {
                e.preventDefault()
                this.confirm()
            }
        }
    }
}
</script>

优点：灵活性最高，支持复杂按键逻辑和条件判断；缺点：需要手动管理事件生命周期，避免内存泄漏。

内容的提问来源于stack exchange，提问作者anio