title: Javascript - Change input letter before written down textarea
body: <p>I'm trying to make a virtual keyboard with jQuery.</p>
  
  <p>When I press <code>'a'</code> in the given textarea, suppose that <code>'z'</code> should be written instead.</p>
  
  <p>In textarea, I found the whole steps of typing a letter is given by</p>
  
  <p><code>keyDown event → keyPress event → letter typed in textarea → keyUp event</code></p>
  
  <p>In my code, I detected the letter in <code>keyPress event</code> and in that event, if the letter was <code>'a'</code>, I added <code>'z'</code> in textarea using <code>.val()</code> method.</p>
  
  <p>If we have the initial string <code>hello</code> in textarea, after <code>keyPress event</code>, we have <code>helloz</code>. Then, before <code>keyUp event</code> occurs, textarea became <code>helloza</code>. So I deleted the last letter, <code>'a'</code> in <code>keyUp event</code>.</p>
  
  <p>This looks great, and also works well. But, the problem is TIME DELAY.</p>
  
  <p>Since steps I wrote above takes a second, <code>'a'</code> appears quite a while in the textarea.</p>
  
  <p>But the virtual keyboard in <a href="https://translate.google.com/" rel="nofollow">Google Translator</a> does not show the original letter.</p>
  
  <p>How can I do this?</p>