3


1

テキストボックスに入力して、入力したものを同時にdivに表示するにはどうすればよいですか?

テキストボックス(または入力フィールド)に入力し、同時に入力しているものをすべてdivまたはページ上の他の場所に同時に表示するようにしたいですか?

stackoverflowサイトは、質問を入力するときにこれを行います。 質問を入力すると、テキストボックスの下のボックスに入力している内容が表示されます。 私の質問が理にかなっていることを願っています!

前もって感謝します。

3 Answer


7


StackOverflowサイトは構文の強調表示も行うため、もう少し機能しますが、基本的な考え方はキーボードイベントをリッスンすることです - keydown(より良い)、` keypress`または keyup(ボタンが 継続的に押されます)、そのコールバックで、ソースコンテナーの値でターゲットコンテナーの値を更新します。 これは簡単な例です。

最善の解決策は、「keyup」と(「keydown」または「keypress」)の両方にバインドすることです。 `key(press | down)`コールバックが実行されるとき、テキストボックスの値はまだ古い値であるため、ターゲットコンテナを更新するとき、最後の文字を取得しません。 一方、「keyup」は、テキストボックスの値が更新された後に発生します。 ただし、ボタンは一度だけ放されるため、ボタンを押したままにすると、「キーアップ」は起動しません。そのため、ターゲットは最後に更新されます。 解決策は両方を使用することです:)

$("textarea").bind('keyup keydown', function() {
    $("#target").html(this.val());
});

http://jsfiddle.net/TJgFe/2 [こちらの例]をご覧ください。


2


http://api.jquery.com/keydown/ [.keydown()]関数を使用して、この効果を実現できます。

    Test



    $(function() {
        $('#foo').keydown(function() {
            $('#result').text($(this).val());
        });
    });


1


良い質問…​ 以前は考えもしなかったが、その機能は素晴らしい。

ソースの表示に行きました:

このページには関数が添付されています:

    $(function() {
        editorReady(1, heartbeat.answers);
    });

ここのURLには、関数「editorReady」が含まれています。 http://sstatic.net/js/question.js?v=b05e8725a843