jQuery to make a preview pane of a textfield

Type something below (can include XHTML)

How much code do you think it takes to get a preview pane like that? Here’s what it might look like in jQuery

<textarea name="preview"></textarea>
<div id="preview"></div>
<script type="text/javascript">
  $("textarea[name='preview']")
      .bind("keyup",
            function(){
               $("#preview_pane").html( $(this).val() );
            });
</script>

That’s functionally one line of code broken up for readability. jQuery just straight up rules.

If you want to see a more advanced way to handle this issue—in Catalyst but you could adapt the code to any backend—check out Catalyst+Ajax: How to get a preview pane for a textarea which even supports live previewing of JavaScript.

digg stumbleupon del.icio.us reddit Fark Technorati Faves