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

フォーム

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

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

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

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

フォーム

Posted by Yousuke.U