Javascript - Change input letter before written down textarea

Question

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?

Try calling `event.preventDefault()` in the `keyPress` event handler. — soulprovidr, Feb 02 '15 at 20:23
@sholanozie If you upload this comment as the answer, I will select your answer! — Analysis, Feb 02 '15 at 20:27

score 2 · Accepted Answer · answered Feb 02 '15 at 20:28

2

Try calling event.preventDefault() in the keyPress event handler.

answered Feb 02 '15 at 20:28

soulprovidr

754
3
14

score 2 · Answer 2 · answered Feb 02 '15 at 20:31

As mentioned, you can use preventDefault() to prevent it from being displayed in your text box, then if you are looking for practical way to get the pressed key's character (instead of the char code), you can do :

$('#txt').on('keypress', function (e) {
    var pressedKey = String.fromCharCode(e.keyCode);
    var $txt = $('#txt');
    e.preventDefault();
    if (pressedKey == 'a') {
        $txt.val($txt.val() + 'z');
     }
});

Here is demo: http://jsfiddle.net/82meao9v/1/

Javascript - Change input letter before written down textarea

2 Answers2

Linked