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

处理程序在{em {1}}的默认动作之前触发。这就是为什么您可以在关键事件上使用keydown的原因-处理程序在发生默认动作之前触发，这就是为什么默认动作可以通过event.preventDefault()取消的原因。

因此，对于您要尝试执行的操作，清除值并调用preventDefault()：

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.value设置为空字符串不会删除最近按下的键？

2 个答案: