jQuery 簡単！現在入力中の文字数を表示してフォームの使いやすさを向上させる方法

どうもこんばんは。Toshikuraです。前回から引き続き、フォーム関連の連続記事です。今回のTipsは【jQuery 簡単！現在入力中の文字数を表示してフォームの使いやすさを向上させる方法】です。メッセージフォーム等、文字数が限定されているフォームを使用する際には実装していきたいですね。ちなみに今回の例では文字数制限を超えた際の挙動もメモしておきます。

発展編

13. 現在入力中の文字数を表示

まず試しに現在の入力中の文字数をカウントしてみます。

HTML

<textarea id="count"></textarea>
現在の文字数：<span id="txtnum">0</span>

JS

$(function(){
	$(‘#count’).bind(‘keydown keyup change’,function(){
		var tnum  = $(this).val().length;
		$(‘#txtnum’).text(tnum);
	});
});

　

14. 残り文字数を表示

上記で出力・取得した現在の文字数を使って【残りの文字数】を表示させてみたいと思います。とても簡単に実装できますのでぜひお試しください。

HTML

<textarea id="count"></textarea>
現在の文字数：<span id="txtnum">0</span><br/>
残り文字数　：<span id="txtmax">5</span>

JS

$(function(){
	$(‘#count’).bind(‘keydown keyup change’,function(){
		var tnum  = $(this).val().length;
		$(‘#txtnum’).text(tnum);
		var tmax = 5 – tnum; // 5文字制限の場合の例です。
		if(tmax > 0){
			$(‘#txtmax’).text(tmax);
		}else{
			$(‘#txtmax’).text("文字数オーバーです。");
			//文字数オーバーの際の挙動
		}
	});
});

以上になります。デモでは今回のtipsを適応した例が確認できますので、もしよろしければ合わせてご確認ください。