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

【jQuery】デバイスによって条件分岐させる方法

更新日:2022.09.09
457
jQuery

jQueryでhtml要素の読み込み完了後にイベントを実行する方法

更新日:2022.09.09
1677
jQuery

jQueryを使ってある要素をクリックしたら任意のリンク先に飛ばす方法

更新日:2022.09.09
2220
jQuery

【簡単】横並びブロック要素の高さを揃えるにはmatchHeight.jsを使おう

更新日:2022.09.09
404