Text is displayed with delay

I want text I enter in a text field immediately to be shown in a 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>

It works, the only problem is, it is displayed with a delay.

So if I enter “abc”, it only shows “ab”. I need to enter another character, for example “abcd”, so that it shows “abc”. The last character is always missing.

Here you can try it out: http://jsfiddle.net/285cz0np/


solution

The event is being fired onkeydown. Since the value of the input element hasn’t changed yet, you aren’t seeing the results.

You could change it to onkeyup, instead: (updated example). Or you could set a delay before calling the function.


Alternatively, you could also listen to the input event:

Example Here

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