JavaScript(jQuery)で、フォーム内の文字数をリアルタイムでカウントする方法

2020年5月16日

JavaScript(jQuery)で、フォーム内の文字数をリアルタイムでカウントしたい！

こんにちは、はるまきです。今回は「自作Webサービス解説シリーズ」です。今回で第11回目！

　自作Webサービスのアクアリウム専門の質問サイト→ Q&Aquarium

このシリーズでは、初学者の僕が学んだことや、ハマったポイントなどを紹介しています。間違っている箇所があればご指摘お願いします。※あくまで僕(はるまき)流の解釈をもとに作成しています。

1. 実際のコード
2. 最後に

実際のコード

実現するコードは以下。僕が自作Webアプリで使っているものを持ってきました。

<p>文字カウント： 　<span id="moji_suu">0</span>　　字/400字　</p>//ここにカウント数が表示される。spanの中のテキストが変更される。
<textarea limit="400" id="questionContents" name="question"></textarea>//文字入力フォーム。limit=400に設定

$(function(){
 
    /*文字数カウント */
    //カウントするフィールドを監視
  　//キーダウンで発火
    $("#questionContents").keydown(function(){
        //現在入力されている文字を取得
        var text = $(this).val();
        //正確にカウントするため改行コード削除
        text = text.replace((new RegExp("\r\n","g")),"");
        text = text.replace((new RegExp("\n","g")),"");
      
        //現在の文字数
        var count = text.length;

        //設定した上限文字数
        //limitの値を変更すると上限値を変えれます。
        var moji_limit = $(this).attr("limit");
 
        //文字数をリアルタイムの表示
        $("#moji_suu").text(count);
 
        //処理分け
        if(count == 0){
            //字を消して0文字となった場合。
            $("#moji_suu").text("0");
        } else if(count > moji_limit) {
            //上限文字数を超えたら赤色表示
            $("#moji_suu").css("color", "red");
        } else {
            //文字数が範囲内なら色を戻す
            $("#moji_suu").css("color", "");
        }
    });
});