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

jQueryで文字数カウントツールを作ります。
テキストエリアにテキストが入力された時、 文字数をカウントして上に表示。表示はリアルタイムに行います。 動作サンプル、サンプルコード、コード解説の順番で記述しています。

動作サンプル

0文字

html


<div class="count">
    <div id="num">0文字</div>
    <textarea id="text" cols="30" rows="3"></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 + '文字';
        
        // #num に文字数を表示
        $('#num').text(strCount);
    });
    
});

コード解説

要素にIDを指定


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

文字数を表示するdiv要素、テキストを入力するtextarea要素にそれぞれIDを指定します。

イベント設定

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

});

リアルタイムで文字数を取得するためにイベントを複数指定します。 その場合は各イベントをスペースで区切って記述します。

改行を取り除く

	// 改行を取り除く
	str = str.replace(/\n/g, '');

単純に文字の数だけを取得するために改行を取り除きます。 改行も数えたい場合はこの行は不要です。

jQuery入門