将'keydown'事件侦听器添加到文档中，输入字段除外

Question

我正在使用虚拟键盘和表单输入部分来创建一个Hangman游戏，用户可以在其中输入整个单词。

我能够在文档中添加'keydown'事件侦听器，但是我不希望在输入字段中键入内容时触发'keydown'事件。

这是我添加事件监听器的方式。

document.addEventListener('keydown', handleKeyDown);

这里是表单输入。

<form onSubmit={e => onSubmit(e)}>
          <div className="input-group">
            <input
              type="text"
              className="form-control"
              name="letter"
              placeholder="Guess the word"
              value={formWord}
              onChange={e => setFormWord(e.target.value.toUpperCase())}
              disabled={disabled}
            />

            <div className="input-group-append">
              <button
                className="btn text-white"
                type="submit"
                disabled={disabled}
              >
                <i className="far fa-arrow-alt-circle-right" /> Go!
              </button>
            </div>
          </div>
        </form>

我已经尝试过使用document.getElementsByTagName[0].removeEventListener('keydown', handleKeyDown)，但这不起作用。我假设这是因为事件侦听器已添加到实际文档中而不是元素中。

请帮助！

Answer 1

在handleKeyDown内部，仅当event.target与输入字段不匹配时才执行函数的主体，例如：

const handleKeyDown = (event) => {
  if (event.target.matches('[name="letter"]')) {
    return;
  }
  // rest of function body
};