Live Preview of Html Changes

Posted: September 5, 2013 in Ajax, Jquery
Tags: , , ,
In this post I want to explain How To Implement Live Content Preview with jQuery. This is very basic jquery tutorial using keyup() element. It’s useful just five lines of javascript code to show live content preview. Best examples Google Adwords Campaign piece preview. Take a look at live demo

Download Script

Contains javascipt code. $(“.word”).keyup(function(){}word is the class name of anchor input field. Using $(this).val() calling input field value.

// <![CDATA[
javascript” src=”
// ]]>
<script type=”text/javascript”>




var word=$(this).val();

return false;


HTML code

<input type=”text” name=”word”color: blue;”>word” /><spancolor: blue;”>word_preview“></span>



font-family:Arial, Helvetica, sans-serif;




width:150px; height:26px; font-size:18px;


Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.