Question

Consider this Example.

The essential bit is the JavaScript:

function encodeInput(editor) {
    theText = editor.val();
    theText = theText.replace(/\*\*\*(.*?)\*\*\*/, '<strong><i>$1</i></strong>', 'g');
    theText = theText.replace(/\*\*(.*?)\*\*/, '<strong>$1</strong>', 'g');
    theText = theText.replace(/\*(.*?)\*/, '<i>$1</i>', 'g');
    console.log(theText);
    $('#preview').html(theText);
}

$(function() {
    $editor = $('#editor');
    $editor.keyup(function() {
        encodeInput($(this));
    });
});

Tested and works great (I do need the \*\*\* part or it doesn’t work).
Anyways, on to the main course

The Problem

Because I’m using keyup, the script is not very responsive (eg. it only "runs" once the user had let go of the key). I want it to behave more like the editor here on StackOverflow, where the key is pressed and response occurs immidiately.

I tried using keydown and keypress but it seems as if the val() attribute is not updated when it runs, so I can’t really know the updated value.

In Short

How can I make it more responsive, so that when the user pressed a key, the preview is automatically updated??

Answer 1

You can use the HTML5 input event in most browsers and the propertychange event in IE < 9. These events fire immediately after the textarea’s value is updated.

Here’s an updated demo using these events:

http://jsfiddle.net/muWm2/1/

I’ve written about this in a few places on SO. Here are two of them:

• Catch only keypresses that change input?
• jQuery keyboard events

I would recommend against updating the preview on every single change to the textarea’s value because it could quickly get unresponsive, which is a big no-no for user experience. I’d suggest “debouncing” the event, in this case waiting for a period of user inactivity (say half a second) before updating the preview. Here’s an answer and a link that may help:

• How to trigger an onkeyup event that's delayed until a user pauses their typing?
• Debouncing Javascript Methods by John Hann