jQueryで入力フォームに文字カウント（カウントダウン）を設置する方法

2012/02/29 TAGS :jQuery, Twitter, フォーム

今やTwitterで有名になった、入力フォームに文字を入力した際のリアルタイム文字カウント表示。
この様なINPUTやTEXTAREAに入力されたテキストの文字数を数えるには
jQueryの「$(●●●●).val().length;」を使うと簡単に取得することが出来るようだったので
文字カウント、カウントダウンのいろいろな取得パターンを作ってみました。

jQueryで入力フォームに文字カウント（カウントダウン）を設置【SAMPLE１】

まずは単純に入力された文字数を表示するパターン。

HTMLには文字数を表示するエリアと
入力フォーム（ここではTEXTAREA）を設置します。

◆HTML
<span class="count">0</span>
<textarea name="textarea" rows="10" cols="30"></textarea>

CSSは特に動作には関係しないので今回は割愛します。

そしてこのテキストエリアに入力された際に
文字カウントエリアの値を変化させるスクリプトは以下のようになります。

◆SCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('textarea').bind('keydown keyup keypress change',function(){
		var thisValueLength = $(this).val().length;
		$('.count').html(thisValueLength);
	});
});
</script>

「.bind()」を使って文字が入力される度に、
文字数のカウントエリアの値を変える指定にしています。

これを実行させると以下のように。

テキストエリアに文字が入力されると
その文字数が右上に表示されます。

jQueryで入力フォームに文字カウント（カウントダウン）を設置【SAMPLE２】

次はTwitterの入力フォームのように
特定の値から文字数をカウントダウンさせるパターン。

HTMLは上記と同じ構成として、
スクリプトを以下の様な構成にします。

◆SCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var countMax = 120;
	$('textarea').bind('keydown keyup keypress change',function(){
		var thisValueLength = $(this).val().length;
		var countDown = (countMax)-(thisValueLength);
		$('.count').html(countDown);

		if(countDown < 0){
			$('.count').css({color:'#ff0000',fontWeight:'bold'});
		} else {
			$('.count').css({color:'#000000',fontWeight:'normal'});
		}
	});
	$(window).load(function(){
		$('.count').html(countMax);
	});
});
&#91;/javascript&#93;

「var countMax = 120;」ここに最大文字数の値を入れます。
テキストエリアに入力されると120から文字数がカウントダウンされ
マイナスの値になると文字色を赤、太字に変化させています。

これを実行させると以下のように。

<iframe src="https://black-flag.net/devel/jQueryTextCount/index_countdown.html" style="width:595px;height:250px;border:none;overflow:hidden;"></iframe>

「var countMax = 120;」ここの数値を変えるだけで最大文字数の値を変更することが可能になります。

<h2>jQueryで入力フォームに文字カウント（カウントダウン）を設置【SAMPLE３】</h2>

最後はテキストエリアだけでなく、
１行タイプのINPUT入力エリアを併用したパターン。

HTMLはINPUTを追加する構成にしたとします。

[html]
◆HTML
<span class="count_input"></span>
<input type="text" />

<span class="count_textarea"></span>
<textarea name="textarea" rows="10" cols="30"></textarea>
[/html]

INPUTとTEXTAREAそれぞれに別々の最大値を指定して、
それぞれスクリプトを実行させます。

[javascript]
◆SCRIPT
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	var inputCountMax = 50;
	var textareaCountMax = 120;

	$('input').bind('keydown keyup keypress change',function(){
		var thisValueLength = $(this).val().length;
		var countDown = (inputCountMax)-(thisValueLength);
		$('.count_input').html(countDown);

		if(countDown < 0){
			$('.count_input').css({color:'#ff0000',fontWeight:'bold'});
			$('input').css({background:'#ffcccc'});
		} else {
			$('.count_input').css({color:'#000000',fontWeight:'normal'});
			$('input').css({background:'#ffffff'});
		}
	});

	$('textarea').bind('keydown keyup keypress change',function(){
		var thisValueLength = $(this).val().length;
		var countDown = (textareaCountMax)-(thisValueLength);
		$('.count_textarea').html(countDown);

		if(countDown < 0){
			$('.count_textarea').css({color:'#ff0000',fontWeight:'bold'});
			$('textarea').css({background:'#ffcccc'});
		} else {
			$('.count_textarea').css({color:'#000000',fontWeight:'normal'});
			$('textarea').css({background:'#ffffff'});
		}
	});

	$(window).load(function(){
		$('.count_input').html(inputCountMax);
		$('.count_textarea').html(textareaCountMax);
	});
});
</script>

これを実行させると以下のように。

こっちではカウント文字数がマイナスの値になった際に
各エリアの背景色も変化させるパターンにしています。

２つの入力エリアのスクリプト動作はもっとまとめることも出来ますが
今回はあえて個別に指定しています。

サンプルは以上です。

この様にjQueryの「$(●●●●).val().length;」を使うと
簡単に文字数のカウント、カウントダウンを実装することでき、
ユーザーにも優しいUIにすることが可能になります。

Twitterの様な入力フォームUIを実装する際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから