jQueryでテキストエリアやテキストフォームの入力を動的に取得・表示する方法です。

テキストボックスの入力を動的に取得・表示する

テキストボックスの入力時にvalue値をリアルタイムに取得して表示する動作サンプルとサンプルコードです。

See the Pen Get text form input dynamically by yochans (@yochans) on CodePen.

<input type="text" id="input" value="">
<p id="output"></p>

$('#input').on('input', function () {
	$('#output').html($('#input')[0].value)
})

on()イベントを使ってinputというIDが指定されたテキストフォームに入力があった時に、指定した処理を実行します。

テキストフォームの値を取得してoutput要素に表示しています。

取得する値は「$(‘#input’).value」ではなく、「$(‘#input’)[0].value」にあるので注意です。

テキストエリアの入力を動的に取得・表示する

テキストエリアの入力時にvalue値をリアルタイムに取得して表示する動作サンプルとサンプルコードです。

See the Pen Get TEXTAREA input dynamically by yochans (@yochans) on CodePen.

<TEXTAREA id="input"></TEXTAREA>
<p id="output"></p>

$('#input').on('input', function () {
	$('#output').html($('#input')[0].value)
})

テキストエリアのリアルタイムな値もテキストフォームと同様の方法で取得可能です。