How to Add Fancy JQuery Live Comment Preview to Comment Textarea without Plugin

The comment live preview feature helps the comment writer to see what they are writing in the comment form as they write. This feature works well to help prevent errors in spelling and grammar by giving the user a chance to see what they are writing before they post their comment.

Javascript

put the code in the header.php, right before end of head tag. You can read for more explanation here: http://www.dynamicwp.net/articles-and-tutorials/how-to-add-live-comment-preview-to-comment-textarea-without-plugin/

<script type="text/javascript">

jQuery(document).ready(function(){

	jQuery("").add("<h3 id='preview-title'>Comment Preview</h3><div id='comment-preview'></div>").appendTo(document.body);
	jQuery("#comment-preview, #preview-title").insertAfter("#comment");

	var $comment = '';
	jQuery('#comment').keyup(function() {
		$comment = jQuery(this).val();
		$comment = $comment.replace(/

+/g, '<br /><br />').replace(/
/g, "<br />");
		jQuery('#comment-preview').html( $comment );
	});

});

</script>

Share the love

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement