【Jquery】文字入力をリアルタイムでタイミングよくチェックするには？

JavascriptでWebサイトを開発していると、

「文字入力をリアルタイムで何かしらチェックしたい」

といった要望があったりします。

よくあるのが、

パスワードのリアルタイムチェック
メールアドレスのリアルタイムチェック

などでしょうか。

今回はそんな文字入力で何かしらチェックをする方法を見ていきたいと思います。

ちなみに本記事ではJqueryを利用した方法となります。

このブログは現役のエンジニア（プログラマー歴が約12年）の僕（よしたか）が2019年12月後半から日々更新しております。

もしもアフィリエイトは会員登録後も無料です！
今すぐ会員登録してアフィリエイトを始めよう！

文字入力をリアルタイムでチェックする方法
1. Jqueryの「keyup」イベントを利用
2. リアルタイムで且つ入力が終わったタイミングでチェックする方法
まとめ

文字入力をリアルタイムでチェックする方法

では早速ですが、Jqueryで文字の入力時に発火させる方法としては「keyup」イベントがあります。

Jqueryの「keyup」イベントを利用

<input type="text" name="test" id="test"></input>

このような入力フォームがあったとして、

$('#test').keyup(function() {
    // テキスト入力時にイベント発火
})

Jqueryでこんな感じで記載すれば1文字入力毎に何かしらイベント発火する事が出来ます。

ただし、この場合だと本当に1文字毎に入力をチェックしてしまいます。

分かりやすく言うと、例えば上記のイベント発火で何かしらのAPIに接続するとなった場合、1文字毎にAPIに接続するようになってしまいます。

つまり入力間違い等でもその都度1文字ずつチェックしてしまう感じですね。

なので入力が終わった、と思われる時にイベント発火が理想ですよね。

「onChange」でも可能なのですが、「onChange」だとフォーカスを外さないとイベント発火しないので、「keyup」で対応したいと思います。

リアルタイムで且つ入力が終わったタイミングでチェックする方法

ではどのように対応するのか、見ていきましょう。

function delay(callback, ms) {
  var timer = 0;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      callback.apply(context, args);
    }, ms || 0);
  };
}

$('#test').keyup(delay(function (e) {
    // テキスト入力時にイベント発火
}, 500));

このようにすればOKです。

イベント発火のタイミングを計る「delay」関数を通すといった感じですね。

「delay」関数では、実行のたびの時間遅延でタイマーが発動されます。（例でいうと500ミリ秒後）

またこの時間が経過する前に再度実行されるとタイマーはリセットされます。（つまり500ミリ秒以内の文字入力中はイベント発火しません）

このようにすることで、例えばイベント発火時の無駄なAPI接続などが減らせます。