【簡単】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イベントを使えば入力された内容を常時監視してくれるのでとても便利です。

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

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

Ads

関連記事

JavaScript プログラミング

【簡単】slickを使い左右チラ見せ中央固定のカルーセルスライダーを実装する方法

2022.01.16
450
JavaScript プログラミング

スクロール中、要素をふわっと出す。scrollrevealjs の使い方について【簡単便利】

2019.12.01
109
HTMLCSS プログラミング

スマホなどでaタグのリンクが2回タップしないと機能しない原因

2021.01.17
440
WordPress プログラミング

親子階層の設定をしているworpdressカテゴリーページでページ内容が重複してしまうのを対処する方法。【canonicalを設定しよう】

2022.01.31
56