php - フォーム入力を瞬時に表示

Question

ユーザーが入力したフォーム入力を直接表示する方法を知りたいです。

たとえば、このサイトのように、質問をすると、テキストがすぐ下に表示されます。または、このサイトhttp://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.phpのように、メモを追加すると、左側にスティッキーの状態がすぐに表示されます見る。

これはjavascriptで行われていると思いますが、方法がわかりません

敬具

Answer 1

jQuery.keyup イベント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;
}
​

Answer 2

<input id="example_input" type="text"/>
<div id="content_receiver">

$("#example_input").bind("keyup change", function() { 
    $("#content_receiver").html($(this).val())
})

samlによって提案された変更イベントに加えて、キーアップイベントに応答するように編集されました

Answer 3

通常、JavaScript関数はkeyup、フォーム入力のイベントを処理するために割り当てられます。この関数は、ページ上の別の要素を選択しinnerText、その要素のプロパティをフォーム入力の現在の値（キーアップ後）に設定します。

http://demo.tutorialzine.com/2010/01/sticky-notes-ajax-php-jquery/demo.phpの付箋の色、またはそのテキスト形式など、残りの「プレビュー」 ここSOで見られるように、ハンドラー関数、CSS、または両方の組み合わせによって適用されるインラインスタイルを介して実行されます。

私はあなたが遊ぶことができるフィドルで簡単な例を設定しました：http：//demo.tutorialzine.com/2010/01/sticky-notes-ajax-をエミュレートするhttp://jsfiddle.net/95nyp/1/ php-jquery / demo.php

これが詳細な説明ではない理由は、これを達成するための多くの方法があり、この答えはより単純な方法の1つにすぎないことを覚えておいてください。