Written by Kasumi

【簡単】jQueryを使って、入力中の値をリアルタイムでチェック・取得する方法

jQueryを使ってフォーム内の入力中テキストをリアルタイムでチェック・監視し、取得する方法を知りたい。

本記事ではこのような悩みを解決します。

※jQueryを使うので事前にライブラリをhtmlに追加してください。

実装サンプル

See the Pen
jQuery リアルタイムチェック
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

input要素のボックス内にテキストを入力すると、すぐ下のspan要素内に入力されたテキストがリアルタイムで反映されます。

導入方法は次章より説明します。

リアルタイムでチェックするjQueryコード

//onメソッドを使ったkeyupイベント処理
$(document).on("keyup", "入力するテキストボックスのクラス・ID名を指定", function (e) {
  //入力されたテキストを取得 ・変数に格納
  input = $(this).val();
  //上記変数をspanタグ内に反映
  $('span').text(input);
});

上記コードがリアルタイムでチェックするjQueryコード例です。

リアルタイムでチェックするにはjQueryのonメソッドを使い、keyupイベントを指定します。

keyupイベントはキーボードのキーが押された時・離れたときを判定してくれるイベントになります。

以上のコードで解決します。

まとめ

複数の入力項目があるフォームで通常のonclickイベントだとエンターキーやsubmitボタンを押さないと入力された内容が取得できないかと思います。

keyupイベントを使えば入力された内容を常時監視してくれるのでとても便利です。

ぜひ参考にしてみてください。

以上で解説を終わります。

目次

関連記事

jQuery

htmlのselectボックスを使って選択したoptionにリンクさせる方法【jQuery】

更新日:2022.09.09
3323
HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
4275
jQuery

【簡単】jQueryのDatepickerに時間設定を追加したDatetimepickerを導入する方法

更新日:2022.09.09
5466
jQuery

jQueryを使ってURLにアンカーを残さず、ページ内リンクさせる方法

更新日:2022.09.09
3326