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="https://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" />
https://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"?
ReplyDeleteThats cool.
ReplyDeletejQuery 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 :)
ReplyDeleteNice, changing the subject, can you do something like that? http://fixoutlook.org/
ReplyDeleteGood demonstration functionality! Thanks.
ReplyDeleteNice work!!!!!!!
ReplyDeleteThank U
Hi Srinivas,
ReplyDeleteThank 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
ReplyDeleteintersting
ReplyDeletequestion 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
ReplyDeleteit is very nice to get started.. thanks a lot dude..
ReplyDeletehi and thanks a lot for this,
ReplyDeleteis 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...
ReplyDeleteAny 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.
ReplyDeleteany chance i can use this with ckeditor?
ReplyDeletehi, thanks a lot for this article,
ReplyDeletei 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 :)
ReplyDeleteThankyou
ReplyDeletenice post, short and sweet keep up the good work
ReplyDeletei have several kind of fields in my form like select, text fields, textarea etc,. how can i preview all fields using keyup or change method?
ReplyDeletethanks
@ Philip - To add multiple lines listen to the keyboard keypress event with keycode of enter tag (13) and add BR Tag to preview area
ReplyDeleteThank you very much!!!! You saved me!!! :)
ReplyDeleteHi, How to do with different fonts. I mean, when user selected font in drop down, to change preview with that font? Is it possible? Thanks!
ReplyDelete