Preventing key-delay in TextArea Element Using Event

The problem...

I was using the onkeypress event to grab the text from the textarea element but I realized that the data collected was one character delayed. I then tried the onkeyup and onkeydown but it was still one character delayed.

Initially, I thought this was a bug with my code but after a careful consideration, I realized my code was fine and the onkeypress event was also working correctly so why the one character delay?

What was really happening

When ever we want to get the value of an element from an event, what we normally do is to take the event.target.value, this code is the code that returns the content in the element. Now when the contents are returned with event.target.value code, it returns everything excluding the current event, that means, excluding the current character.

We are going to run an experiment to show what is happening. In the gif below, we add a function to the textarea onkeypress event.

const show = e =>{
    console.log(e.target.value);
    console.log(e);
}

When the first character is entered, the event.target.value is '', this is because, the value is contained in the event object not the event.target.value.
This same analogy happens as we continue to type

Solving the problem...

Now as we are seeing what is the causing the problem, we can see the solution,
to prevent the key delay, we just need to adjust our function to add event.key which contains the current character to event.target.value which also contains the 'already' text, so the function will now be like this

const get_value = (e){
        let text = e.target.value + e.key
    }

So, that's the solution folks.

20

Tags:

HtmlEvent