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

bxsliderを使って左右チラ見せのカルーセルスライダーを実装する方法

更新日:2022.09.09
4224
jQuery

開閉するアコーディオンリストがあり、一つ開いたら、他の開いていたのを閉じさせる方法

更新日:2022.09.09
9950
jQuery

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

更新日:2022.09.09
7447
jQuery

複数設置に対応したタブ切り替えをjqueryで実装しよう

更新日:2022.09.09
3766