jQuery | テキストフォームやテキストエリアの入力を動的に取得・表示する方法
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)
})テキストエリアのリアルタイムな値もテキストフォームと同様の方法で取得可能です。