Live Comment Previews

The ‘Live Comment Preview’ hack that I use on The Long Letter has now been implemented here on Eclecticism. If you know what I’m talking about, then we’re good to go. If you don’t know what I’m talking about, then click on the “Comments” link to any post, type something in the comment box, and look just below the comment box. It’s a nifty trick. ;)

I originally picked this up from ScriptyGoddess, with help from Phillip. Geeky tech details on my implementation here follow.

All this is is a nice little JavaScript addition to the page. I don’t believe that this will constitute a security risk, but I’m no expert, so use at your own risk. ;) Obviously, if you do want to use this on your site, you’ll need to have access to your templates.

In the header of the individual entry template, just after the already included JavaScript bits, I added the following code:

<script type="text/javascript">
 var newline = /n/g;
 function ReloadTextDiv() {
  var NewText = document.getElementById("text").value;
  NewText = NewText.replace(newline, "<br />");
  var DivElement = document.getElementById("TextDisplay");
  DivElement.innerHTML = NewText;
  }
</script>

Then, in the body of the template, just after the closing </div> tag following the preview and submit buttons, but before the </form> tag, I added the following:

<br />
<h2>Live Comment Preview:</h2>
<span id="TextDisplay">Note: if you're comfortable with HTML, feel free to use it in your comments. If not, just type away. Single returns will be automatically converted into linebreaks (&lt;br /&gt;), double returns will be converted into paragraph breaks (&lt;p&gt;). This text will disappear as soon as you start typing.</span>

Lastly, in the textarea tag that defines where the comment text is entered in by a visitor, I added a onkeyup="ReloadTextDiv();" declaration. The full textarea tag should look as follows:

<textarea tabindex="4" id="text" name="text" rows="10" style="width: 80%;" onkeyup="ReloadTextDiv();">

What all this does is actually simple enough. As a visitor enters their comment into the comment box, each time they release a key the onkeyup function calls the ReloadTextDiv JavaScript snippet that I added. This function loads any text inside the comment box (identified by its ID of "text"), replaces any carriage returns with <br /> tags so that line breaks appear correctly, then writes the output into the element identified as "TextDisplay" — in this case, between the span tags I added after the submit and preview buttons.

If you find this useful, feel free to use it in your own pages. While I wouldn’t refuse credit, it really does belong to ScriptyGoddess and Phillip. Enjoy!