Javascript - Change input letter before written down textarea

I'm trying to make a virtual keyboard with jQuery.

When I press 'a' in the given textarea, suppose that 'z' should be written instead.

In textarea, I found the whole steps of typing a letter is given by

keyDown event → keyPress event → letter typed in textarea → keyUp event

In my code, I detected the letter in keyPress event and in that event, if the letter was 'a', I added 'z' in textarea using .val() method.

If we have the initial string hello in textarea, after keyPress event, we have helloz. Then, before keyUp event occurs, textarea became helloza. So I deleted the last letter, 'a' in keyUp event.

This looks great, and also works well. But, the problem is TIME DELAY.

Since steps I wrote above takes a second, 'a' appears quite a while in the textarea.

But the virtual keyboard in Google Translator does not show the original letter.

How can I do this?