How can i make a "Realtime" text change in div tag

Question

So, I have this sample code:

<textarea id="input" onkeydown="pressed()"></textarea>
<div id="output"></div>
<script>
function pressed()
{
    var input = document.getElementById('input').value;
    document.getElementById('output').innerHTML = input;
}
</script>

My problem is, if type something on the input, the script wont write it on the output immediately, it only does after I type another key. So, is there anything that im not doing right?? Help pls

Answer 1

Use the input event - then paste will also work

document.getElementById("input").addEventListener("input", function() {
  document.getElementById('output').innerHTML = this.value;
})

<textarea id="input" ></textarea>
<div id="output"></div>

Answer 2

Because you're using onkeydown which triggers function pressed immediately, and input will equal to the value of input before you press.

Use onkeyup and it will work fine.