Add a preview to your WordPress comment box
Yesterday I was browsing around the blog world and came across this posting on keeping a clean desk. I found the topic interesting enough to leave a comment, but that’s not really the point. What I saw as I typed was that below the comment box was a preview of what I was typing. This is one of those things that I couldn’t believe I hadn’t thought of for any of my blogs so I went out and got it working on one of my sites. Hopefully within the next couple of days I’ll get it working here as well. A couple of minutes adding the code and it’s working here as well.
Adding the preview area
On most blogs this will go in the comments.php file in whatever theme you’re using.
The first thing you need to do is add a hidden div that will become your comment box. It must have an ID but can also use a class if you’re already using a class to style your comments.
The comment_preview_wrapper div is what we’re going to show using javascript code in just a second. The comment_preview div is where we’ll actually put the preview.
Line four is blank intentionally just to note that the comment_preview div is empty right now. We’ll use the innerHTML property to fill it as the user types.
The Javascript
The following JS code goes in the onkeyup property of the comment textarea.
-
document.getElementById(‘comment_preview_wrapper’).style.display=‘block’; document.getElementById(‘comment_preview’).innerHTML = this.value.replace(/(\n)|(\r\n)/g, ‘<br />’);
You’ll notice that we replace any line breaks with <br /> tags so that the preview will have line breaks where it should.
The textarea should look like this, although it may have an ID or class depending on what theme you’re using.
-
<textarea name=“comment” onkeyup=“document.getElementById(’comment_preview_wrapper’).style.display=’block’; document.getElementById(’comment_preview’).innerHTML = this.value.replace(/(\n)|(\r\n)/g, ‘<br />‘);"></textarea>
Question, Comments...
Do you have more questions. Please either leave a comment below or join us in our new forum.
Wow, you made it yourself! I have to be frank, I used a ready made plugin for Wordpress to get the live comment preview. You can find it here: Live Comment Preview
Thanks for the link.
I was more surprised that I hadn’t seen anybody doing that before, especially as much time as I spend on blogs.
And I thought about looking for a plugin that would do it since I’m sure there’s probably others than the one you linked to, but it seemed like such an easy little piece of Javascript that it wasn’t worth spending too much time looking. It was about a 5 minute write and took another 5 to put it on 2 of my blogs. Heck, it took longer to write this post than it did to write the code.
I found a downside. Now that I know that it’s possible, and easy, to add a comment preview it’s almost annoying on sites that don’t offer it. The way I write I tend to go back and reread everything several times (thank you Ms. Browne) and do some touching up. That’s really hard to do in a little textarea box.
Of course that’s a pretty minor rant :)
And a slight bug just got fixed. When I copied the JavaScript over from my editor to here I forgot to include the /g at the end of the regex. So what was happening is only the first line break was being converted to a <br />. It’s fixed now.
One other thing to be careful of is to make sure that when you copy and paste the code it’s not changing the single quotes to smart quotes. If you get a JavaScript error on illegal characters that’s what’s happening.