DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Input And Textarea Preview

04.17.2005
| 12750 views |
  • submit to reddit
        Preview what you type in an input or a textarea out of them (in a html tag, like a p, hx...)

Seen here: http://amuchamu.bitacoras.com/archivos/2005/02/17/previsualizacion_de_comentarios (spanish explain).

javascript code:

function preview(id1, id2){
	  		var NewText = document.getElementById(id1).value;
	  		splitText = NewText.split(/\n/).join("<br />");
	  		var DivElement = document.getElementById(id2);
	  		DivElement.innerHTML = splitText;
}


html code:

<form action="#">
<label>Name:</label>
<input type="text" id="nombre" onkeyup="preview('name', 'preview-name');" />

<label>Phone:</label>
<input type="text" id="phone" onkeyup="preview('phone', 'preview-phone');" />
</form>

<h2>Preview</h2>
<dl>
	<dt>Name:</dt>
	<dd id="preview-name"></dd>
	<dt>Phone:</dt>
	<dd id="preview-phone"></dd>

</dl>