Question

I would like to know how you display directly the form input a user types in.

For example like on this site, when you ask a question, your text is shown directly at the bottom. Or like on this site http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.php when you add a note, you can see on the left immediately how your sticky is going to look.

I think this is done with javascript but I don’t know how

kind regards

Answer 1

You can use jQuery.keyup events jsfiddle

 $("textarea").keyup(function(){
   $('div div').html(this.value);

});
$("input").keyup(function(){
   $('div span').html(this.value);

});

HTML

    <textarea ></textarea>
<input />
<div >
    <div></div>
    <span></span>
</div>

CSS:

div{

 position: relative;
    width: 150px;
    height:100px;
}
span{

 position:absolute;
    right:3px;
    bottom:3px;
}
​