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

2019-06-18jQuery

テキスト入力を動的に取得・表示する方法

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);
});

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

2019-06-18jQueryフォーム, 取得

Posted by Yousuke.U