javascript - フォームの入力値をテキストとしてすぐに複製する

Question

から値を複製することは可能ですか

<textarea id="text"></textarea>

と

<input id="name" type="input" />

純粋なテキストとして div または段落タグにすぐに入れますか?

例: 「123」と入力すると、遅延なしで「123」が div に複製されます。

Answer 1

keyupハンドラ内およびハンドラ内でイベントを使用して、次の値でタグをtextarea/input更新する必要があります。div/ptextarea/input

例：

$('#mytextarea').keyup(function () {
   $('#myDiv').text(this.value);
});

注：キーが押されて離されていないときにdivを更新するための他の回答を参照してください。

Answer 2

古いブラウザーと最新のブラウザーの使用keyupとkeypressイベント。input

jQuery('#text').on("keyup keypress", function() {
    jQuery("#div").text(this.value);
});

デモ- キーアップ/キープレス
デモ- 入力

Answer 3

はい、キーダウン イベントと短い 10 ミリ秒の遅延を使用します (または、30 ミリ秒未満はユーザーに気付かれません)。

$("#text").on("keydown",function(){
    setTimeout(
        // proxy callback to `this` rather than `window`
        $.proxy(function(){ 
            $("#target").text(this.value);
        },this)
    ,10);
});

デモ: http://jsfiddle.net/7Qrug/

編集: が気に入らない、または理解できない場合は、次のよう$.proxyに書くこともできます。

$("#text").on("keydown",function(){
    var that = this;
    setTimeout(function(){ 
        $("#target").text(that.value);
    },10);
});