Code index » JavaScript samples and snippets

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.

No comments · [comment]
digg stumbleupon del.icio.us reddit Fark Technorati Faves
«·jQuery to flip emphasis and italics relative to contextKeywords: form bind change onchange ie problem ie6 ie7 jquery·»
Your information (required) Name*
Email*
Website

* Indicates required fields; email is used for validation and is not displayed on the site.

Your comment
Commenting on jQuery to make a preview pane of a textfield
Title

Body is limited to ≈1,000 words. Paragraphs—but not line breaks—are automatically inserted. Valid XHTML is required. These are the allowed tags–

<a href=""></a> <br/> <acronym title=""></acronym> <abbr title=""></abbr> <code></code> <pre></pre> <tt></tt> <ins></ins> <del></del> <hr/> <cite></cite> <b></b> <i></i> <sup></sup> <sub></sub> <strong></strong> <em></em> <h1></h1> <h2></h2> <h3></h3> <q></q> <blockquote></blockquote>