Eyecatch jQuery

Javascript,jQuery

複数対応! jQueryでテキストエリアの文字数をカウントしてみる

2015/05/13

複数個のテキストエリアに対し文字数をカウント、文字数をリアルタイムで表示する事になったので、スクリプトを組んでみました。
また、●●文字以上、●●文字以下という制限もするとのことで、カウントに応じて文字数の色を変えるということにも挑戦しています。

段階を追って作成したので、それぞれ解説しながら行きたいと思います。
なお、jQueryを使っているので、ヘッダで読み込んでおくことが必須です。

Step1

まず1つのテキストエリアのカウント数を取得して表示させてみます。

JavaScript

HTML

これで、以下の様なものが出来上がります。

文字数カウント 1

Step.1 デモ

Step.1 デモはこちらから

Step2

では次に、複数対応させてみます。
Javascriptの中でループを使うので、先程は comment としていたHTMLのID値の末尾を comment1 という風に数値とします。

Javascript

HTML

Step3

Step2 の内容で一応出来たかな、と思ったのですが、軽い落とし穴がありました。
"改行"や"スペース"も 1文字と数えられてしまいました。

「keyup」で取得しているから? それとも改行コードを取得しているでしょうか?
よく分かりませんでしたが、ぐぐってみましたら軽く解決策が見つかりました。
JavaScriptを以下のように修正します。

.val() のあとでreplace()、正規表現による文字列の変換をして、「改行」及び「スペース」をカウントしないようにしています。
これで、以下のように、改行してもカウントされないようになります。

文字カウント 2

Step.3 デモ

Step.3 デモはこちらから

Step4

文字数に応じて、カウント文字色を変えてみます。
具体的には、5文字以上、30文字以内で黒、それ以外は赤とします。

JavaScript

CSS

初期状態で赤文字とするために、クラス「red」を指定します。

HTML

文字カウント 3

Step.4 デモ

最終形デモはこちらから。

-Javascript,jQuery
-, , ,