「文字入力をリアルタイムで何かしらチェックしたい」といった要望があったりします。あるのが、パスワードのリアルタイムチェックメールアドレスのリアルタイムチェックなどでしょうか。今回はそんな文字入力で何かしらチェックをする方法を見ていきたいと思います。ちなみに本記事ではJqueryを利用した方法となります。このブログは現役のエンジニア(プログラマー歴が約12年)の僕(よしたか)が2019年12月後半から日々更新しております。文字入力をリアルタイムでチェックする方法Jqueryの「keyup」イベントを利用リアルタイムで且つ入力が終わったタイミングでチェックする方法まとめ文字入力をリアルタイムでチェックする方法では早速ですが、Jqueryで文字の入力時に発火させる方法としては「keyup」イベントがあります。テキスト入力時にイベント発火})Jqueryでこんな感じで記載すれば1文字入力毎に何かしらイベント発火する事が出来ます。この場合だと本当に1文字毎に入力をチェックしてしまいます。分かりやすく言うと、例えば上記のイベント発火で何かしらのAPIに接続するとなった場合、1文字毎にAPIに接続するようになってしまいます。入力間違い等でもその都度1文字ずつチェックしてしまう感じですね。入力が終わった、と思われる時にイベント発火が理想ですよね。「onChange」でも可能なのですが、「onChange」だとフォーカスを外さないとイベント発火しないので、「keyup」で対応したいと思います。リアルタイムで且つ入力が終わったタイミングでチェックする方法ではどのように対応するのか、見ていきましょう。500));このようにすればOKです。イベント発火のタイミングを計る「delay」関数を通すといった感じですね。「delay」関数では、実行のたびの時間遅延でタイマーが発動されます。(例でいうと500ミリ秒後)またこの時間が経過する前に再度実行されるとタイマーはリセットされます。(つまり500ミリ秒以内の文字入力中はイベント発火しません)このようにすることで、例えばイベント発火時の無駄なAPI接続などが減らせます。まとめこの記事のおさらいリアルタイムチェックではkeyupイベントを使おうただし入力が終わったと思われるタイミングでイベント発火させよういかがだったでしょうか。最近ではなんでもリアルタイムでチェックするようなUIが増えてきたと思います。今後はもっと増えると思うので、「keyup」を覚えてみるのはどうでしょうか。今回はこれでサクッと終了です。関連記事プログラミング【90%オフだらけ】Udemyのセールはかなりお得なので必ず利用しよう!プログラミング学習でUdemyを利用されている人は多いと思いますが、Udemyには不定期に開催しているセールがあり通常よりかなりお得にコースを購入する事が出来ます。転職に有利なjavaを最短で学びたいと考えているあなたへ。本記事では現役のエンジニアがCodeCamp(コードキャンプ)でjavaが学べるJavaマスターコースを各ポイント毎に詳しく解説しています。Math」を使おうPHPで小数点が絡む計算が気になる方へ。Math」を使った方がいいといった内容を細かくご紹介いたします。浮動小数点数の精度は有限といった内容です。2020.06.17プログラミングプログラミングテックアカデミージュニアのリアルな口コミや評判をまとめてみたテックアカデミージュニアの口コミや評判が気になる方へ。本記事では現役のエンジニアが今話題の小中高校生向けのプログラミングスクールであるテックアカデミージュニアのリアルな口コミと評判を紹介いたします。2020.05.27プログラミングプログラミング【Udemy】フロントエンジニア必須のReactが学習できるオススメ講座3選のご紹介UdemyでJavascriptフレームワークのReactが学習できるオススメ講座3選のご紹介。近年人気が出てきているReactの説明もさせて頂きます。2020.05.19プログラミングプログラミング【他社との比較】テックパートナーズカレッジの料金は?プログラミングスクールの『テックパートナーズカレッジ』の料金が気になっているあなたへ。本記事では現役のエンジニアが『テックパートナーズカレッジ』の料金について、コース毎に料金体系を詳しく、他社との比較まで解説しています。defined.")}))})()。