開発メモ：入力された文字数をリアルタイムにカウントして表示する

：ユーザー登録はコチラ：

014：入力された文字数をリアルタイムにカウントして表示する

対象言語：JavaScript / jQuery

キーワード：JavaScript jQuery 文字数カウント数えるリアルタイム表示改行コード取り除く

実働サンプル（設定上限文字数：20字）現在の文字数：0字

テキストエリア等文字の入力フィールドがあってサイト管理者が文字数の上限を設定するとき、現在入力されているテキストの文字数がリアルタイムに表示されると便利ですよね、って思ってしまいました。

なぜこの処理が必要になったかと言えば、いざMySQL等のデータベースに入力データを登録するとき、POSTされたデータの特殊文字をPHPのhtmlspecialchars関数でHTMLエンティティに置換すると総文字数が変化してしまうからです。ページのリダイレクトなり遷移なりを間に挟んでPHPのみで文字数チェックを行えば、こういった差（サイト管理者が意図する文字数 vs 入力者が意図する文字数）が少なからず発生します。さらに改行コードの問題もあります。入力者が改行を入れると目には見えないながら改行コードが付加されて制限文字数を圧迫します。

そういったいくつかの問題点をクリアして、以下のようなコードを作ってみました。

まずはページファイル（HTML）の設定です。

<head>
    <!--- jQueryを使用します --->
    <script type="text/javascript" src="jquery.js"></script>
</head>
 
<!--- 入力場所  limit=""はサイト管理者が設定する上限文字数 --->
<textarea style="height:80px; width:100%;" id="count_area" limit="20"></textarea>
<!--- <input type="text" value="" id="count_area" limit="20" />等でも可 --->
 
<!--- 文字数表示場所 --->
現在の文字数：<span id="moji_suu">0</span>字

次はJavaScript側です。HTMLソース内のどこに置いてもイーかと。

<script>
$(function(){
 
    //カウントするフィールドを監視
    $("#count_area").keyup(function(){
 
        //現在入力されている文字
        var text = $(this).val();
 
        //正確にカウントするため改行コード削除
        text = text.replace((new RegExp("\r\n","g")),"");
        text = text.replace((new RegExp("\n","g")),"");
 
        //現在の文字数
        var count = text.length;
 
        //管理者が設定した上限文字数
        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", "");
 
        }
    });
});
</script>

入力されたテキストに施すべきチェックというのは何も文字数だけでは無いでしょうけど、この記事はひとまずこの辺で。文字数だけがチェック対象なら、上記処理で入力データが1文字以上400字以内で無いときに<input type="submit" />を非表示にするなりdisabledにするなりといった方法が考えられます。

著者 You Mizuguchi

Name：
Pass：

中学受験専門 理科総合研究所 －理総研－

014：入力された文字数をリアルタイムにカウントして表示する

中学受験専門　理科総合研究所　－理総研－