前回に引き続き、フォーム要素のカスタマイズに関するtipsです。お問い合わせフォームのテキスト入力欄などで文字数制限が設けられているケースがあるかと思います。そんな時に現在何文字入力されているかを表示させる機能をjQueryで実装していきます。

それではコードを見ていきます。HTMLでは今回サンプルとしてtextarea要素を使用していますが、その他の入力フォーム要素でも構いません。maxlength属性を入れていますが対応していないブラウザもありますので注意が必要です。CSSではデザインに合わせてスタイルをつけていきますが、今回のサンプルでは文字数が超えた時に赤色太字に変わるように設定しています。

【HTML・CSS】※一部抜粋

// HTML
<textarea id="text-input" maxlength="50"></textarea>
<span id="text-count">あと<span id="num">50</span>文字</span>

// CSS
#text-input {
   width: 100%;
   min-height: 200px;
   background: #eee;
   padding: 10px;
   margin: 0 0 15px 0;
   border: none;
}
#text-count {
   display: block;
   text-align: right;
}
#text-count.over {
   font-weight: bold;
   color: #c90000;
}

最後にjavascriptを見ていきます。テキストの入力される要素に対して、keydown、keyup、keypress、change、blurとそれぞれのイベントをカバーし、入力された文字数をlengthで取得します。デフォルトで設定した上限文字数から入力された文字数を引いた数値をナンバー部分に出力します。その時に文字数が超えているかを示すステータスをclassとして付与します。

【javascript】

$(function(){
  $("#text-input").on('keydown keyup keypress change blur',function(){
     var valueLength = $(this).val().length;
     var limitNum = 50 - valueLength
     if ( limitNum >= 1 ) {
       $("#num").html(limitNum);
       $("#text-count").removeClass('over');
     } else if ( limitNum <= 0 ) {
       $("#num").html('0');
       $("#text-count").addClass('over');
     }
   });
 });

このように結構簡単に実装することができます。これがあるだけでユーザーに対する印象が変わってくるかと思います。今回のサンプルはこちらにあげていますのでご参考に。

（参考）
jQueryで数字をカウントアップしながら表示する方法