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 
Live Demojavascript
Contains javascipt code. $(".word").keyup(function(){} - word is the class name of anchor input field. Using $(this).val() calling input field value.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
$(".word_preview").html(word);
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".word").keyup(function() {
var word=$(this).val();$(".word_preview").html(word);
return false;
});
});
</script>HTML code
<input type="text" name="word" class="word" />
http://9lessons.info/<span class="word_preview"></span>CSS
body
{font-family:Arial, Helvetica, sans-serif;
background:#FFFFFF;
}
.word_preview
{color:#cc0000
}
.word
{width:150px; height:26px; font-size:18px;
}
Thanks for the tutorial, but why did you use "return false"?
Thats cool.
jQuery is everywhere, I can't believe how common it is! It seems like every day there's 10 new tutorials about jQuery and how amazing it is... kudos :)
Nice, changing the subject, can you do something like that? http://fixoutlook.org/
Good demonstration functionality! Thanks.
Nice work!!!!!!!
Thank U
Hi Srinivas,
Thank you for this great tutorial.
Do you know a way to deal with the input's autocomplete attribut ? I mean when you type a character in an input field, sometimes you get a little list of "items" that you have already entered previously.
The problem is: if you click on one of those items the live preview doesn't work. It's only working if you select an item by hitting the "Enter" key of your keyboard.
So do you have an idea about fixing that ?
great
intersting
question is , what if we want to preview the result in other input box , normally with specifying class='word_preview' to another input box , nothing worked
it is very nice to get started.. thanks a lot dude..
hi and thanks a lot for this,
is it possible to get the input field by default,
i have a field with a name inside (saved) but it's not showing it until you write something.
thanks
Hi thanks very much...u are doing a great job...now im much interested in jquery to learn...
Any idea why this demo shows 'ad campaign demo' but there's no script download on here for this demo? Would love to view this script. Great site.
any chance i can use this with ckeditor?
hi, thanks a lot for this article,
i try to do the same but with a textarea-not a text field,
but when i create a line the preview write a single line,
is it possible to do this?
thanks a lot!!!
thank you man :)