Direct/Live Preview Like Stackoverflow?

Question

Hello, how do i do like Stackoverflow, when you type in this field, that the it previews directly under it?.. I have no idea how this have been made and i really like to do something like this to my website. I have a textarea that you edit, and then..? how to?

Thanks

Answer 1

Also take a look on their blog

http://meta.stackoverflow.com/search?q=wmd

http://wmd-editor.com/

Answer 2

Simple, place a div element and then on the onMouseup of the text box you can have a jquery event move the info

<textarea id="entry" onmouseup="$('#output').html($('#entry').val())"></textarea>
<div id="output"></div>

Answer 3

Use JQuery's keypress event:

$('#in').keypress(function() {
  $('#out').text($(this).val());
});

Answer 4

Using jquery, in the header in a script tag:

    $(document).ready(function(){
        $('#textbox-id').keypress(function(){
          $('#preview-id').html($(this).val());
        }
    });

Then, in your html:

<textarea id="textbox-id"></textarea>
<div id="preview-id"></div>

Edit

Damn, beaten by a few seconds. Also, wmdeditor is exactly it.