文字数カウント_アイキャッチ

【jQuery】テキストエリアに入力した文字数をリアルタイムでカウントする方法を徹底解説【初心者向け】

こんにちは、ミウラアケミ(@akmnred)です。

今回は、テキストエリアに入力した文字数をリアルタイムで簡単にカウントするプログラムをご紹介します。

文字数カウント

よくある上記のようなプログラムですね。

このプログラムは下記の言語で動作しています。

  • HTML
  • CSS
  • jQuery

jQueryのコードだけでいうと、たったの4行で書けてしまうくらい超簡単なので、初心者の方でもチャレンジしやすいかなと思います。

では、早速コードの方を見ていきましょう!

テキストエリアに入力した文字数をリアルタイムでカウントする方法

テキストエリアに入力した文字数をリアルタイムでカウントする方法を、順番に解説していきますね。

まずはソースコードから。

ソースコード

ポイントその①:文字入力数の初期値を0に設定

文字入力数は最初は0から始めたいので、あらかじめHTMLの方で文字入力数を表示したい箇所に「0」と書いておきます。

このソースでいうと<span class=”showCnt”></span>で挟まれている部分ですね。

ポイントその②:keyupで文字が入力された時のイベントを拾う

次にkeyupイベントについて解説します。

keyupイベントは、キーボードのキーが押され(入力)、押されたキーが上がってきたタイミングで呼び出されるイベントになります。

なのでこの場合、テキストエリアに文字を入力し、キーボードのキーから指を離したタイミングのイベントを拾っていることになります。

ポイントその③:lengthで文字数カウント

テキストエリアに文字を入力した際のイベントを拾うことができたので、このイベントの中で文字数カウントの処理を書いていきます。

$(this)とは、イベントが発生している要素そのものを指しています。

今回の場合だと$(‘#textBox’)、つまりテキストエリアのことですね。

$(this).val().lengthとはつまり$(‘#textBox’).val().lengthと同じ意味です。

val()でテキストエリアの値を取得しています。

例えばテキストエリアに「あいうえお」と入力した場合、$(this).val()の中身をデベロッパーツールで確認すると下記のようになります。

valの中身

「あいうえお」が入っていますね!

これでテキストエリアに入力された文字は取得できたので、あとはこの文字の数をカウントするだけです。

文字数カウントにはlengthを使います。

テキストエリアに「あいうえお」と入力した場合、$(this).val().lengthの中身をデベロッパーツールで確認すると下記のようになります。

lengthの中身

「あいうえお」は5文字なので、ちゃんと文字数も取得できていますね!

あとは取得できた文字数を$(‘.showCnt’).text(cnt);としてあげることで<span class=”showCnt”></span>の中に表示させてあげればOKです。

最後にCSSで見た目を整えて完成したのがこちらです。
↓↓↓
デモサイト

まとめ

jQueryを使えば、たった4行で文字数カウントのプログラムが書けてしまうのだから素晴らしいですよね。

CSSである程度デザインを整えてあげれば、誰かに使ってもらえるようなプログラムにもなりますし、皆さんもぜひチャレンジしてみてください。

関連記事

  1. はじめてのテーマ_アイキャッチ

    WordPress

    【制作期間10時間】WordPressのテーマ自作に初チャレンジ!【意外とカンタン】

    自作してみるまでは「めちゃくちゃ難しいんじゃないか」とハードルを感じて…

  2. WP_任意の抜粋文_アイキャッチ
  3. jsアイキャッチ_181107

    JavaScript

    【jQuery】フォームの送信先をボタンによって切り替える方法を徹底解説!

    formのaction(送信先)を動的に切り替えたい時ってありますよね…

  4. プログラミングのイラスト

    HTML + CSS

    【HTML+CSS】ボタンをクリック時に要素を表示・非表示する方法を徹底解説【カンタンです】

    ボタンのクリックイベント処理というと、JavaScriptで実装するの…

  5. HTMLとCSSを完全無料で教える企画_アイキャッチ

    HTML + CSS

    【初心者限定】「HTML+CSSを完全無料で教えます企画」始動!

    「応募人数ゼロだったらどうしよう…」と内心ドキドキしながら呟いたのです…

  6. アラサー未経験でWebエンジニアに転職_アイキャッチ

    プログラミング

    【アラサー完全未経験】高卒で文系でもWebエンジニアに転職できた話【実体験】

    主体性を持って行動を起こしていけば、アラサーだろうが未経験だろうが高卒…

最近の記事

  1. 和泉リサイクル環境公園の菜の花
  2. 大阪駅
  3. 黒門市場
  4. 成長
  5. 【FTP不要】WordPressのサーバー移行はAll-in-One WP Migrationで決まり【10分で完了】のアイキャッチ

アーカイブ

PAGE TOP