Добавить прослушиватель событий keydown в документ, кроме поля ввода - PullRequest
Новая
       45

Добавить прослушиватель событий keydown в документ, кроме поля ввода

0 голосов
/ 29 сентября 2019

Я создаю игру 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), но это не работает.Я предполагаю, что это потому, что слушатель события был добавлен в фактический документ вместо элемента.

Пожалуйста, помогите!

1 Ответ

1 голос
/ 29 сентября 2019

Внутри handleKeyDown, выполнять тело функции только в том случае, если event.target не соответствует полю ввода, например: 

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