如何根据上下文响应键盘输入？答案

【问题标题】：How to contextually respond to keyboard input?如何根据上下文响应键盘输入？
【发布时间】：2021-03-16 16:15:25
【问题描述】：

此处示例：https://jsfiddle.net/ngecpjb9/

当 N 被按下时，选择下一个 Vue 组件。但是，在输入输入元素时，如果我点击 N，它会“选择”下一个组件。当专注于 input 时，应禁用此功能。

我的 Vue 应用程序有数百个组件，层次结构有好几层，是否有用于接受键盘输入的单独组件的标准模式或库？

【问题讨论】：

如果你在 onKey 方法中添加了一个条件，比如没有选择输入（例如，当输入处于活动状态时状态设置为 true）？
@antoineso 是的，这可行，但这只是一个复制品。例如，如果我有三个位于同一层次结构中的组件，但每个组件都有完全不同的键盘映射......我正在尝试弄清楚如何将其抽象出来。

标签： javascript vue.js vuejs3

【解决方案1】：

你可以用document.activeElement获取焦点元素，如果是文本输入，即inputtextarea或contenteditable，就忽略key，像这样：

const onKey = (e) => {

    const inputs = ['INPUT', 'TEXTAREA'];
    
    const isInput = document.activeElement === e.target &&
      (inputs.includes(e.target.tagName) ||
      e.target.hasAttribute('contenteditable'));
      
    if (!isInput && e.code === 'KeyN') {
        active.value = (active.value + 1) % 3;
    }
};

【讨论】：

【解决方案2】：

您可以在您的onKey 方法中验证目标是否具有type，因为只有输入标签具有类型属性

const onKey = (e) => {
  if (e.target.type !== undefined && e.code === 'KeyN') {
    active.value = (active.value + 1) % 3;
  }
};

【讨论】：