jqueryを使ってフォームに入力された文字数をチェックする

2014年12月06日

カテゴリー：: javascript

以前、仕事で簡易的に作ったのですが、テキストフィールドとかに入力された文字数のチェックをして、何文字入力されたかを表示し、制限以上の文字数が入力されれば、なんらかの警告を出すといった処理の作り方をご紹介いたします。
※html側でjqueryを読み込んでいるのが前提です。

まず、HTMLを以下のように記述します。

<div class="form_item">
	<input name="text01" class="count_check" type="text" />
	<p class="note">※50文字以内（<span class="count">0</span>/<span class="limit">50</span>）</p>
</div>

</div>

inputタグ、もしくはtextaraタグにクラス「count_check」を設定し、その下にクラス「note」を設定したタグ（divなどでOK）を用意し、その中にクラス「count」、クラス「limit」を設定したタグを用意します。
クラス「count」内に現在何文字入力されているかを表示するので、初期値として0(半角数字)を入力します。
クラス「limit」内の数字(半角数字)は何文字まで入力できるのかをチェックするための数字を入力します。

上記のサンプルコードでは50文字以内の文字入力が許容範囲になります。

次に、javascriptです。

$(function() {

	$('.count_check').bind('keydown keyup keypress change',function(){
		var input_count = $(this).val().length;
		var limit = $(this).next(".note").find(".limit").text();
		
		$(this).next(".note").find(".count").html(input_count);
		
		if( input_count > limit ) {
			// 文字制限を超過した場合の処理
			$(this).next(".note").find(".count").css("color","#c00").css("font-weight","bold");
		} else {
			$(this).next(".note").find(".count").css("color","").css("font-weight","");
		}
	});

});