2016/09に公開
入力フォームの文字入力において文字数制限をすることがあると思いますが、10文字程度ならともかく、それ以上になってくるとユーザーもいちいち何文字入力したか把握できません。
さらにある程度の文章を入力するとなると、制限を超えてしまったりして何度も入力しなおしが発生する分、ユーザーもストレスになってきます。
そこで、リアルタイムで文字数をカウントする仕組みを作ってみたいと思います。
通常は開発担当が実装してくれると思いますが、jsなどがある程度わかるのであれば難しくもないので、覚えておいて損はないでしょう。
ここではJqueryを用いますが、純粋にjsで実現することも可能です（ページ下の参考ページを参照するか、Google先生に聞いてください）。
0/100文字
0/100文字
0/1000文字
0/1000文字
全角でも半角でも1文字は1文字文字としてカウントします。スペースや改行も1文字としてカウントされます。
なお、最大文字数を超えるとカウントは赤の太字に変化します。
IE7/8でも動作します（IE6では確認できていません）。
<input type="text" name="text" id="text"> <p><span class="count">0</span>/100文字</p> <textarea name="textarea" id="textarea"></textarea> <p><span class="count">0</span>/1000文字</p>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
通常通り入力フォームを組んでください。必要であれば、適切なclass名やid名をつけてください。またCSSも適宜設定してください。
$(function(){
var textboxM = 100; //テキストボックスの最大文字数（適宜変更）
var textareaM = 1000; //テキストエリアの最大文字数（適宜変更）
var rest = 0; //残文字数を格納するための変数
$('textarea, input[type="text"]').on('keydown keyup keypress change',function(){
var thisValueLength = $(this).val().length; //文字数を取得
$(this).next('p').children('.count').html(thisValueLength); //文字数を出力
if($(this).get(0).tagName.toLowerCase() == 'textarea') rest = textareaM - thisValueLength;
else rest = textboxM - thisValueLength;
if(rest < 0){
$(this).next('p').children('.count').css({color:'#f00',fontWeight:'bold'});
} else {
$(this).next('p').children('.count').css({color:'#666',fontWeight:'normal'});
}
});
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。