【jQuery】複数対応！テキストエリアの文字数をカウントするスクリプト

2013/04/06 2018/10/11

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

段階を追って作成したので、それぞれ解説しながら行きたいと思います。

Step1. 文字数の取得

まず１つのテキストエリアの文字数を取得して表示させます。

JavaScript

<script type="text/javascript">
$(function(){
    $('#comment').bind('keyup',function(){
        var thisValueLength = $(this).val().length;
        $('.count').html(thisValueLength);
    });
});
</script>

$(function(){

$('#comment').bind('keyup',function(){

var thisValueLength = $(this).val().length;

$('.count').html(thisValueLength);

});

</script>

HTML

<textarea name="comment_a" cols="60" rows="10" id="comment"></textarea>
 <span class="count">0</count>

1 2	<textarea name="comment_a" cols="60" rows="10" id="comment"></textarea> <span class="count">0</count>

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

Step.1 デモ

Step2. 文字数カウントを複数対応させる

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

Javascript

<script type="text/javascript">
$(function(){
    $('#comment1,#comment2,#comment3').bind('keyup',function() {
        for ( num=1; num<=3; num++ ) {
            var thisValueLength = $('#comment' + num).val().length;
            $(".count" + num).html(thisValueLength);
        }
    });
});
</script>

$(function(){

$('#comment1,#comment2,#comment3').bind('keyup',function() {

for ( num=1; num<=3; num++ ) {

var thisValueLength = $('#comment' + num).val().length;

$(".count" + num).html(thisValueLength);

}

});

</script>

HTML

<textarea name="comment_a" cols="60" rows="10" id="comment1" ></textarea>
 <span class="count1 bold">0</span>
<br />
<br />

<textarea name="comment_b" cols="60" rows="10" id="comment2" ></textarea>
 <span class="count2 bold">0</span>
<br />
<br />

<textarea name="comment_c" cols="60" rows="10" id="comment3" ></textarea>
 <span class="count3 bold">0</span>

<br />

<br />

Step3. Step2を修正したもの

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

「keyup」で取得しているからなのか、それとも改行コードを取得しているでしょうか？
よく分かりませんでしたが、検索してみましたら軽く解決策が見つかりました。

JavaScriptを以下のように修正します。

<script type="text/javascript">
$(function(){
    $('#comment1,#comment2,#comment3').bind('keyup',function(){
        for ( num=1; num<=3; num++ ) {
            var thisValueLength = $("#comment" + num).val().replace(/\s+/g,'').length; // ←★replace()を追加
            $(".count" + num).html(thisValueLength);
        }
    });
});
</script>

$(function(){

$('#comment1,#comment2,#comment3').bind('keyup',function(){

for ( num=1; num<=3; num++ ) {

var thisValueLength = $("#comment" + num).val().replace(/\s+/g,'').length; // ←★replace()を追加

$(".count" + num).html(thisValueLength);

}

});

</script>

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

Step.3 デモ

Step4. 文字色を変えてみる

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

JavaScript

<script type="text/javascript">
$(function(){
    $('#comment1,#comment2,#comment3').bind('keyup',function() {
        for ( num=1; num<=3; num++ ) {
            var max = 30;
            var min = 5;
            var thisValueLength = $("#comment" + num).val().replace(/\s+/g,'').length;

            if (thisValueLength <= min || thisValueLength >= max) {
                $(".count" + num).addClass('red');
            } else {
                $(".count" + num).removeClass('red');
            }
            $(".count" + num).html(thisValueLength);
        }
    });
});
</script>

$(function(){

$('#comment1,#comment2,#comment3').bind('keyup',function() {

for ( num=1; num<=3; num++ ) {

var max = 30;

var min = 5;

var thisValueLength = $("#comment" + num).val().replace(/\s+/g,'').length;

if (thisValueLength <= min || thisValueLength >= max) {

$(".count" + num).addClass('red');

} else {

$(".count" + num).removeClass('red');

}

$(".count" + num).html(thisValueLength);

}

});

</script>

CSS

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

<style type="text/css">
.bold {
    font-weight: bold;
}
.red {
    color:#ff0000;
}
</style>

.bold {

font-weight: bold;

}

.red {

color:#ff0000;

}

</style>

HTML

5文字以上、30文字以下で記入してください<br /><br />
<textarea name="comment_a" cols="60" rows="10" id="comment1" ></textarea>
 <span class="count1 bold red">0</span>
<br />
<textarea name="comment_b" cols="60" rows="10" id="comment2" ></textarea>
 <span class="count2 bold red">0</span>
<br />
<textarea name="comment_c" cols="60" rows="10" id="comment3" ></textarea>
 <span class="count3 bold red">0</span>

5文字以上、30文字以下で記入してください<br /><br />

<br />

<br />

Step.4 デモ

-Javascript,jQuery
-カウント, 文字

: 【JS】クレジットカード番号を入れるフォームで、4桁入れ終わったら次のフォームにフォーカスを移すスクリプトをjQueryで組んでみた

クレジットカード番号を入れるフォーム（4つに分割してる）を入力する際の入力補助として、4桁入れ終わったら次のフォームにフォーカスを移すというスクリプトを組んでみました。

: ファイルをまとめてアップロードする jQuery のプラグイン「Uploadify」の使い方。

画像ファイルを複数枚一気にアップロード出来ないかと探していましたら「Uploadify」というjQueryのプラグインを発見しましたので、その設置方法を忘備録代わりにポストです。

: CakePHP2 + jQueryUIでテキストボックスにオートコンプリート（オートサジェスト）機能をつける方法

テキストボックスにオートコンプリート（オートサジェスト）機能を、CakePHP2 + jQueryUI環境で作成したので作り方を備忘録としてポストします。

: 【jQuery】3つのプルダウンを連動させるプラグイン『jquery.tgHierSelect』を作ってみた

複数（今回は３つ）のプルダウンメニューを連動させ選択内容を変更させる、いわゆる「連動プルダウン」のプラグインをjQueryで作ってみました。

: jQueryを使わないライブラリ「busy.js」を使って簡単にローディング画面を作ってみる。

仕事で作ったとあるサイトが、APIを叩いて結果を取得・表示するのですが、APIの反応が悪く、やったらと時間が掛かるので、ローディング画像を出し、ちょっとでも訪問者を待たせる努力をしてみようということで探しました所、「busy.js」というライブラリを発見。

PREV: ケン・ワタナベな発泡酒、サントリー「GRAN DRY -グランドライ-」を飲んでみた
NEXT: 【CSS】CSS3のflexboxで簡単に2カラムのレイアウトを作ってみる

【jQuery】複数対応！テキストエリアの文字数をカウントするスクリプト

Step1. 文字数の取得

JavaScript

HTML

Step.1 デモ

Step2. 文字数カウントを複数対応させる

Javascript

HTML

Step3. Step2を修正したもの

Step.3 デモ

Step4. 文字色を変えてみる

JavaScript

CSS

HTML

Step.4 デモ

【DIY】2x4や1x4など、SPF材サイズ早見表 (562,289)

【知識】電話番号の+81の意味と固定電話・携帯電話番号の書き方 (277,572)

TPPやLCCなど、時事や普段使っている「アルファベット略語」を集めてみた (255,028)

【歴史】江戸幕府歴代将軍一覧 (142,979)

【知識】牛肉の部位「おっぱい」は本当に乳房なのかが気になったので調べてみた (128,965)

【Excel】ダブルクォーテーションでデータを囲んだCSVファイルの作成方法 (128,046)