Leo Dominguez

Example

Code

function ReloadTextDiv()
{
	document.getElementById("commentpreview").style.display="block";

	var newline = /\n/g;

	var NewText = document.getElementById("comments").value;

	NewText = NewText.replace(newline, "<br />");

	var DivElement = document.getElementById("commentpreviewcontent");

	DivElement.innerHTML = NewText;
}

The function should ideally be called using unobtrusive Javascript.

function doCommentPreview()
{
	if (!document.getElementById) return true;

	if (document.getElementById("comments"))
	{
		document.getElementById("comments").onkeyup = function()
		{
			ReloadTextDiv();
			return false;
		}
	}
}

window.onload = function()
{
	// place any other onload functions here
	doCommentPreview();
};

Calling the Javascript function unobtrusively allows for graceful degradation. Notice no inline Javascript in sight!

<div class="comment" id="commentpreview" style="display: none;">

<p><cite>You say:</cite></p>

<div id="commentpreviewcontent"></div>

<p><cite>Posted by whoever at whenever</cite></p>

</div> <!-- end of comment preview -->

<form method="post" action="">
	<fieldset>
		<textarea name="comments" id="comments" rows="3" cols="35"></textarea>
	</fieldset>
</form>

Credits

Preview Comments Live

Live Comment Previews

Leo Dominguez