jQueryでinputからリアルタイムで取得する | フロントエンド

1つのinputから取得する
複数のinputから取得する
デモ

1つのinputから取得する

HTML

<input type="text" class="input1">
<p class="write1">ここが書き変わります</p>

jQuery

$(".input1").keyup(function(){
        var val = $(this).val();
        $(".write1").text(val);
});

keyupイベントを使用します。keyupではキーボードのキーが押されたあと、上がった瞬間（指を話した時）にイベントが発動するため、リアルタイムでテキストを取得することができます。

リアルタイムではなく、フォーカスが外れた時にテキストを取得したい場合にはchangeイベントでも取得することが可能です。

複数のinputから取得する

HTML

<input type="text" class="input2">
<input type="text" class="input2">
<input type="text" class="input2">
<input type="text" class="input2">

<p class="write2">ここが書き変わります</p>

jQuery

$(".input2").keyup(function(){
        var writeText = '';
        $(".input2").map(function (index, element) {
            var val = $(this).val();
            if(val){
                writeText += val;
            }
        });
        $(".write2").text(writeText);
});

複数のinputから取得し、テキストを繋げる表示にはmapメソッドを使います。 mapメソッドではeachやforと同じく繰り返しの処理をすることができます。要素の数分だけ、関数を実行し結果をjQueryオブジェクトとして返してくれます。

今回はテキストを繋げるため、ifで値があった場合には変数の中に取得したテキストを繋げていくという処理をしています。