jQueryでテキストフォームやテキストエリアの入力を動的に取得・表示する方法
jQueryでテキストエリアやテキストフォームの入力を動的に取得・表示する方法です。
テキストボックスの入力を動的に取得・表示する
input type=”text”のテキストボックスの入力時にvalue値をリアルタイムに取得して表示する動作サンプルとサンプルコードです。
See the Pen Get text form input dynamically by yochans (@yochans) on CodePen.
HTML
<input type="text" id="input" value="">
<p id="output"></p>jQuery
$('#input').on('input', function() {
$('#output').html($('#input')[0].value);
});onイベントを使ってinputというIDが指定されたテキストフォームに入力があった時に、指定した処理を実行します。
テキストフォームの値を取得してoutput要素に表示しています。
取得する値は「$(‘#input’).value」ではなく、「$(‘#input’)[0].value」にあるので注意です。
テキストエリアの入力を動的に取得・表示する
TEXTAREAの入力時にvalue値をリアルタイムに取得して表示する動作サンプルとサンプルコードです。
See the Pen Get TEXTAREA input dynamically by yochans (@yochans) on CodePen.
HTML
<TEXTAREA id="input"></TEXTAREA>
<p id="output"></p>jQuery
$('#input').on('input', function() {
$('#output').html($('#input')[0].value);
});テキストエリアのリアルタイムな値もテキストフォームと同様の方法で取得可能です。