jQuery: 文字数カウントツールの作り方(2)

jQueryで文字数カウントツールを作ります。その２
今回はテキスト入力フィールドを複数用意します。 そしてそれぞれのテキスト入力フィールドに対して文字数を表示。 動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

0文字
0文字
0文字

html


<div class="count">
    <div class="num">0文字</div>
    <textarea class="text" cols="30" rows="2"></textarea>
</div>

<div class="count">
    <div class="num">0文字</div>
    <textarea class="text" cols="30" rows="2"></textarea>
</div>

<div class="count">
    <div class="num">0文字</div>
    <textarea class="text" cols="30" rows="2"></textarea>
</div>

CSS


.count {
    width: 90%;
    margin-bottom: 20px;
    
}
.num {
    font-weight: bold;
}

.text {
    width: 100%;
}

JavaScript

$(document).ready(function(){
    
    // テキストボックス初期化
    $('.text').val('');
    
    $('.text').on('keydown keyup keypress change', function(){
        var str = $(this).val();
        
        // 改行を取り除く
		str = str.replace(/\n/g, '');
        var strCount = str.length + '文字';
        
        // 前の要素に表示
        $(this).prev().text(strCount);
    });
    
});

コード解説

要素にクラスを指定


<div class="count">
    <div class="num">0文字</div>
    <textarea class="text" cols="30" rows="2"></textarea>
</div>

文字数を表示するdiv要素、テキストを入力するtextarea要素にそれぞれクラスを指定します。 前回は１つだったのでIDを指定しましたが、今回は複数あるのでクラスを指定します。

イベント設定

// イベント設定
$('.text').on('keydown keyup keypress change', function(){

});

textarea要素のclass="text"を取得し、イベントハンドラを設定します。

文字数を表示

// 前の要素に表示
$(this).prev().text(strCount);

prev()メソッドを使うことで直前の要素を操作できます。 各textareaの直前にあるdiv要素に対して文字数を表示しています。

prev()メソッドはpre()と書き間違えやすいので注意が必要です。 pre()ではなく、prev()です。

jQuery入門