Text is displayed with delay

Question

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/

Answer 1

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;
});

Answer 2

The issue is because the input text value, not change until you release the key. by using setTimeout you let the browser to update the value, before running your function (func)

I recommend not to change onkeyup, becuase you want onkeydown, this solution will still work using the onkeydown event

keyword.onkeydown = function (e) {
        setTimeout(func,0)
    }

Update Example jsFiddle: http://jsfiddle.net/285cz0np/1/

I recommend you to change to input event. For example, if the user paste from the clipboard (by using only the mouse), your event will not fire.