• jQuery

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

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

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

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

実装サンプル

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

実装サンプルです。

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

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

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

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

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

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

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

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

まとめ

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

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

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

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