Событие keyup не запускается, если клавиша нажата за пределами поля ввода - PullRequest
Новая
       3

Событие keyup не запускается, если клавиша нажата за пределами поля ввода

0 голосов
/ 08 января 2020

Я пытаюсь реализовать ту же функциональность, что и кнопка продолжения (см. Пример кода), но для ввода с клавиатуры

Что я хочу, чтобы произошло

Если вы щелкните за пределами поля ввода, но вы по-прежнему находитесь в контейнере светло-серого цвета , и была нажата клавиша enter, затем запустите прослушиватель событий.

Что происходит

Если я пытаюсь нажать enter, находясь в поле ввода, прослушиватель событий запускается, как и ожидалось.

Если я пытаюсь нажать enter за пределами поля ввода без фокусировки, но пока в контейнер с прослушивателем событий, ничего не происходит.

Как это исправить?

Пример кода 

let container = document.querySelector(".container");
let continueBtn = document.querySelector(".continueBtn");
let input = document.querySelector(".input-field");


// Click event listener
continueBtn.addEventListener('click', function(event) {
  if (input.value != "")
    console.log("Do something after clicking continue");
});

// Keyup event listener
container.addEventListener('keyup', function(event) {

  if (event.key === "Enter" && input.value != "")
    console.log("Do something after pressing enter");
});
.container {
  text-align: center;
  background: lightslategray;
  height: 100px;
  width: 300px;
  position: relative;
}
<div class="container">
  <input class="input-field" type="text" value="sample text">
  <button class="continueBtn">Continue</button>
</div>

1 Ответ

1 голос
/ 08 января 2020

События клавиатуры, такие как keyup, запускаются только на фокусируемых элементах (кроме body, document и window).

Поэтому для работы с серым элементом div (который не фокусируется), вам нужно сделать его фокусирующим, присвоив ему атрибут tabindex : 

let container = document.querySelector(".container");
let continueBtn = document.querySelector(".continueBtn");
let input = document.querySelector(".input-field");


// Click event listener
continueBtn.addEventListener('click', function(event) {
  if (input.value != "")
    console.log("Do something after clicking continue");
});

// Keyup event listener
container.addEventListener('keyup', function(event) {
  if (event.key === "Enter" && input.value != ""){
    console.log("Do something after pressing enter");
  }
});
.container {
  text-align: center;
  background: lightslategray;
  height: 100px;
  width: 300px;
  position: relative;
}
<div class="container" tabindex="0">
  <input class="input-field" type="text" value="sample text">
  <button class="continueBtn">Continue</button>
</div>

Однако существует еще одна проблема. Когда вы нажимаете Enter , фокусируясь на input или button, событие keyup также запускается. Это связано с тем, что события всплывают в DOM-дереве, то есть, когда элемент запускает событие, все его родители / бабушки и дедушки тоже будут его запускать.

Не допускайте этого, вы можете добавить проверку только для запуска кода когда event.target - это элемент, который вы намеревались сделать: 

let container = document.querySelector(".container");
let continueBtn = document.querySelector(".continueBtn");
let input = document.querySelector(".input-field");


// Click event listener
continueBtn.addEventListener('click', function(event) {
  if (input.value != "")
    console.log("Do something after clicking continue");
});

// Keyup event listener
container.addEventListener('keyup', function(event) {
  if (event.target === container){
    if (event.key === "Enter" && input.value != ""){
      console.log("Do something after pressing enter");
    }
  }
});
.container {
  text-align: center;
  background: lightslategray;
  height: 100px;
  width: 300px;
  position: relative;
}
<div class="container" tabindex="0">
  <input class="input-field" type="text" value="sample text">
  <button class="continueBtn">Continue</button>
</div>
...