Прямой / Предварительный просмотр в реальном времени, как Stackoverflow?

Question

как мне сделать, как в Stackoverflow, когда вы вводите в это поле, чтобы он просматривался непосредственно под ним?..Я понятия не имею, как это было сделано, и мне действительно нравится делать что-то подобное на своем сайте.У меня есть текстовое поле, которое вы редактируете, а потом ..?как это сделать?

Спасибо

Answer 1

Используя jquery, в заголовке тега script:

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

Затем в вашем html:

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

Редактировать

Черт, опередил на несколько секунд.Кроме того, wmdeditor - это именно то, что нужно.

Answer 2

Все просто: поместите элемент div, а затем в OnMouseUp текстового поля вы можете вызвать событие jquery, перемещающее информацию

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

Answer 3

Используйте jQuery keypress событие:

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

Answer 4

видишь это, http://jsfiddle.net/testtracker/2C3Zj/

$(document).ready(function(){
    $('#textbox-id').on('keyup', function(){
      $('#preview-id').html($(this).val());
    });
});​