Как предотвратить реакцию EventListener "keyup" на "backspace", когда строка пуста?

Question

Я пытаюсь установить 2 условия:

userInput = document.getElementById("search")
userInput.addEventListener("keyup", (e) => {
 if ((e.target.value).length === 0 && e.keyCode === 8) {
   console.log("Fail again");
 } 
})

... и при запуске все работает нормально. Но вы получите «Fail again», когда string.length === 1 и нажмете «backspace» (удаление последнего символа из ввода поиска). Кто-нибудь знает способ заставить его следовать условиям? Спасибо за помощь.

Answer 1

Когда имеется 1 символ и вы нажимаете клавишу возврата, входное значение изменяется (становится пустым), а затем срабатывает ваше событие keyup. Ваши условия выполнены, поэтому вы видите сообщение. Если вы хотите узнать, какое значение имеет значение до того, как возвратный пробел вступит в силу, используйте keydown.

Demo:

userInput = document.getElementById("search")
userInput.addEventListener("keydown", (e) => {
  if (e.target.value.length === 0 && e.keyCode === 8) {
    console.log("Fail again");
  } 
})

<input id="search"/>

Если вы хотите по-прежнему получать обновленное значение внутри прослушивателя событий, вы можете сделать что-то вроде этого:

const userInput = document.getElementById("search");
let previousSearchValue = userInput.value;

userInput.addEventListener("keyup", (e) => {
  if (previousSearchValue.length === 0 && e.keyCode === 8) {
    console.log("Fail again");
  }
  previousSearchValue = e.target.value;
});

<input id="search"/>