title: Responsive Rich Editor Preview
body: <p><strong><a href="http://jsfiddle.net/tuUym/" rel="nofollow noreferrer">Consider this Example</a></strong>.</p>
  <p>The essential bit is the JavaScript:</p>
  <pre><code>function encodeInput(editor) {
      theText = editor.val();
      theText = theText.replace(/\*\*\*(.*?)\*\*\*/, '&lt;strong&gt;&lt;i&gt;$1&lt;/i&gt;&lt;/strong&gt;', 'g');
      theText = theText.replace(/\*\*(.*?)\*\*/, '&lt;strong&gt;$1&lt;/strong&gt;', 'g');
      theText = theText.replace(/\*(.*?)\*/, '&lt;i&gt;$1&lt;/i&gt;', 'g');
      console.log(theText);
      $('#preview').html(theText);
  }
  
  $(function() {
      $editor = $('#editor');
      $editor.keyup(function() {
          encodeInput($(this));
      });
  });
  </code></pre>
  <p>Tested and works great (I do need the <code>\*\*\*</code> part or it doesn't work).<br>
  Anyways, on to the main course</p>
  <h2>The Problem</h2>
  <p>Because I'm using <code>keyup</code>, the script is not very responsive (eg. it only &quot;runs&quot; 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.</p>
  <p>I tried using <code>keydown</code> and <code>keypress</code> but it seems as if the <code>val()</code> attribute is not updated when it runs, so I can't really know the updated value.</p>
  <h2>In Short</h2>
  <p>How can I make it more responsive, so that when the user pressed a key, the preview is automatically updated??</p>