javascript - 文本显示有延迟

Question

我希望我在文本字段中输入的文本立即显示在 div 中:

function func() {
  document.getElementById("query").innerHTML = document.getElementById("keyword").value;
}
window.onload = function() {
  keyword.onkeydown = function(e) {
    func();
  }
}

<input type="text" id="keyword" size="40">
<div id="query"></div>

有效，唯一的问题是显示有延迟。

所以如果我输入“abc”，它只会显示“ab”。我需要输入另一个字符，例如“abcd”，以便显示“abc”。
最后一个字符总是缺失。

您可以在这里试用:http://jsfiddle.net/285cz0np/

Answer 1

事件被触发 onkeydown。由于输入元素的值尚未更改，因此您看不到结果。

您可以将其更改为 onkeyup，而不是:(updated example) .或者您可以在调用函数之前设置延迟。

---

或者，您也可以收听 input event :

Example Here

document.getElementById("keyword").addEventListener('input', function (e) {
    document.getElementById("query").textContent = e.target.value;
});