【JavaScript】残り文字数などの文字カウンターを作成する方法

今日はJavaScriptで文字カウンターを作成する方法を紹介します。

また、単純な文字カウンターだけでなく、入力できる残り文字数を数える機能も実装します。

ツイッターの投稿画面なんかで文字を入力すると数字が減っていくあれです。

こちらが今回作るデモです。

DEMO

まずHTMLです。

<p>
  <span id="textCount">0</span>文字入力しました。<br>
  あと<span id="textLest">200</span>文字入力できます。
</p>
<textarea id="textArea" cols="40" rows="15"></textarea>
<p id="textAttention" style="display:none; color:red;">入力文字数が多すぎます。</p>

次にJavaScriptです。

window.addEventListener("DOMContentLoaded", function(){
    var count = null,
    lest = null,
    max = 200,
    input_area = document.getElementById("textArea"),
    output_count = document.getElementById("textCount"),
    output_lest = document.getElementById("textLest"),
    attention = document.getElementById("textAttention");

    input_area.onkeyup = function(){
        var length = input_area.value.length;
        count = length;
        lest =  max - length;
        output_lest.innerText = lest;
        output_count.innerText = count;
        attention.style.display = ( length > max ) ? "block" : "none";
    }
}, false);

変数maxには最大入力文字数として200を設定しています。

onkeyupイベントでは、テキストボックスに入力した文字数に関する関数を作成しています。

変数lengthに入力した文字の長さを格納しています。

これを利用して、変数maxから入力した文字数（length）を引く式を作成すると残り文字数を取得することができます。

また、入力文字数が変数maxで指定した数値を超える条件分岐で「入力文字数が多すぎます」というテキストを表示させるようにしています。

お問い合わせフォームに文字の入力制限をかけたい場合などに役立ちます。簡単なのでぜひ覚えておきましょう。