ダイレクト/ライブプレビューのようにStackOverflow？

Question

私は直接その下にそれをプレビューすることを、あなたがこのフィールドに入力しStackOverflowの、のようにどのように行うのですか？..私はこれが行われていると私は本当に私のウェブサイトにこのような何かをしたいか分かりません。 私はその後、編集テキストエリアを持っている、と..？どのように？

おかげ

Answer 1

スクリプトタグのヘッダに、jQueryの使用：

    $(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());
    });
});​