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

jQueryで入力フォームに文字カウント(カウントダウン)を設置【SAMPLE1】

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

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

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

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

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

◆SCRIPT
<script type="text/javascript" src="http://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で入力フォームに文字カウント(カウントダウン)を設置【SAMPLE2】

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

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

◆SCRIPT
<script type="text/javascript" src="http://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で入力フォームに文字カウント(カウントダウン)を設置【SAMPLE3】</h2>

最後はテキストエリアだけでなく、
1行タイプの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="http://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>

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

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

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

サンプルは以上です。

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

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

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

SHARE

Comments (5)

  • skura | 2014.07.20 17:49

    記事ありがとうございます。
    こちらの内容で、半角を0.5文字、全角は1文字というカウントの仕方も教えて頂けたら幸いです。

  • BlackFlag | 2014.07.24 0:11

    >skuraさん
    コメントありがとうございます。

    ご質問いただいた件についてですが
    やり方としては、入力された文字列の半角の文字数を数えて
    その数に0.5をかけて出た値を全体の文字数から引く、
    といった感じになるかと思います。

    現状はその様な動作は実装しておりませんが
    サンプルができましたらまたここで紹介させていただきます。

    よろしくお願いします。

  • warashi | 2016.11.17 2:56

    いつもスクリプトありがとうございます。
    入力フォームの入力文字数カウントダウンについて教えていただけないでしょうか?
    実はCKeditorを使っているのですが、いろいろとスクリプトを試していますが、反応しません。調べてもいますが情報量が少なく、これといった内容が見つかりません。
    難しいのでしょうか?
    ちなみに利用環境はWordpressではなく、スクラッチCMSです。
    お手数ですが、宜しくお願いいたします。

  • BlackFlag | 2016.11.19 12:27

    >warashiさん
    コメントありがとうございます。
    当スクリプトをご検討いただきうれしく思っております。

    WYSIWYGエディタになると単純なinputやtextareaでの制御ではなくなるので
    当記事のスクリプトだけだと実装は厳しいかと思いますので
    カウント機能があるWYSIWYGエディタを探してみた方が
    早いかもしれません…

    よろしくお願いします。

  • warashi | 2016.11.28 12:39

    お返事が遅くなりました。
    やはり難しいようですね...
    ありがとうございました。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して