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

Question

这里的例子： https://jsfiddle.net/ngecpjb9/

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

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

Answer 1

如果目标具有type ，您可以在onKey方法中进行验证，因为只有输入标签具有 type 属性

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

Answer 2

您可以使用document.activeElement获取焦点元素，如果是文本输入，即input textarea或contenteditable ，则忽略该键，如下所示：

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;
    }
};