我怎么知道 <input/> 的值是多少？

Question

我在“按键”事件上有一个事件侦听器：

input.addEventListener("keydown", function(e) { ... }

当我读取输入字段的值时，它还没有更新。有没有办法在等待“keyup”事件之前知道输入的值是多少？

注意：我尝试使用 setTimeout(function() { ... }, 1);，但它不适用于 copy/paste（输入值未更新）。当我将超时设置为 10 毫秒时，它在我的测试中确实有效，但感觉不是一个可靠的解决方案（可能取决于硬件的速度）。

Answer 1

也许更可靠的解决方案是监听 input 事件？但是，这不会捕获所有键盘事件，这些键盘事件不会 change/mutate 输入值（例如按下 Home/End 按钮）：

document.querySelector('input').addEventListener('input', (e) => {
  console.log(e.target.value);
});

<input type="text" />

或者，如果您真的想要依赖键盘事件，那么keyup就是您想要监听的事件，因为它是在按键触发后触发的已解除：

document.querySelector('input').addEventListener('keyup', (e) => {
  console.log(e.target.value);
});

<input type="text" />

How can I know what the value of the <input/> will be on keypressed?