почему установка input.value равной пустой строке не удаляет недавно нажатую клавишу?

Question

В приведенном ниже коде, если я нажимаю «a» после некоторых клавиш, это должно удалить все с ввода, включая «a», не исчезает в приведенном ниже коде.

const input = document.querySelector("input");   

function type(e) {
  if (e.key === "a") {
    console.log("helo");
    input.value = "";
  }
}
window.addEventListener("keydown", type);

Answer 1

Проблема, с которой вы столкнулись, заключается в том, что событие keydown срабатывает до того, как персонаж будет добавлен к входу. Чтобы решить эту проблему, вы должны использовать событие keyup.

var input = document.getElementById("exampleInput");

function type(e) {
  if (e.key === "a") {
    console.log("helo");
    input.value = "";
  }
}

window.addEventListener("keyup", type);

<input type="text" id="exampleInput" />

Answer 2

Обработчик запускает до действия по умолчанию keydown. Вот почему вы можете использовать event.preventDefault() для ключевых событий - обработчики запускают до действия по умолчанию, поэтому действия по умолчанию можно отменить с помощью preventDefault().

Итак, для того, что вы пытаетесь сделать, очистите значения и call preventDefault():

const input = document.querySelector('input');

window.addEventListener("keydown", type);

function type(e) {
  if (e.key === "a") {
    console.log("clearing");
    input.value = "";
    e.preventDefault();
  }
}

<input>