jqueryを使って文字数を調べる

問い合わせフォームなどで、文字数制限があるときに、
今何文字書いているかわかるようにできれば、ユーザーによりやさしいホームページになります。
そこで、今回は、jqueryを使って文字数を表示させてみます。

html

<div id="c_waku"><p id="num">0</p>
<textarea id="message"></textarea>
</div>

jquery

$(function(){
	$("#message").bind("change keyup",function(){
	var count = $(this).val().length;
		$("#num").text(count);
	});
});

2個以上のイベント時に命令を実行させたいときに使えるメソッド。

bind("イベント",イベント時に実行する命令)

$("#message").bind("change keyup",function(){});

$(“#message”)→<textarea id="message"></textarea>
change→フォームの値を変更した時
keyup→キーボードの入力をやめた時
のイベント時に命令を実行させます。

var count = $(this).val().length;

$(this)→セレクタで選んだ#message
テキストエリアの中の文字数を数えて、変数countに文字数をいれます。

$("#num").text(count);

$(“#num”)→<p id="num">0</p>
セレクタで選んでるテキストを変数countの文字数に変更しています。

さらに変更jquery

$(function(){
	$("#message").bind("change keyup",function(){
	var count = $(this).val().length;
　　　　 var max = 144
		$("#num").text(max-count);
	});
});

文字数制限を行うときは、最大値を指定して、引いてあげれば、残りの文字数を表示できます。