入力したテキストの文字数をカウントアップ

フォームの入力で文字数制限がある場合に使えます。
ここで紹介するのはtextarea要素ですが、input要素でも使えます。

HTMLソース

span要素内の数字がカウントアップされます。
[sourcecode language=’html’]

0
[/sourcecode]

Javascriptソース

[sourcecode language=’javascript’]
$(function(){
$(“textarea”).keyup(function(){
var counter = $(this).val().length;
$(“#countUp”).text(counter);
if(counter == 0){
$(“#countUp”).text(“0”);
}
});
});
[/sourcecode]

keyupイベント

ここでキーになるのがkyeupイベントです。キーボードの入力があると呼び出されます。
詳しい説明はこちら。

value属性に入力された文字数をカウント

3行目の変数counterにvalue属性に入力された文字数を返します。
jQueryではval()で簡単にvalue属性を取得出来ます。
またまた詳しくはこちら。

テキストノードを返すtext()にカウント文字数を出力

変数counterに入っている文字数を、text()でテキストノードとしてid=”contUp”のspan要素に出力。

最後に文字数が0の場合

ページが読み込まれた時はspan要素に0がありますが、入力をするとテキストノードが別の数値に入れ替えられます。
そして、入力した文字を全て削除すると0になりません。なぜかlengthでは0が出力されません。
その為、if分で変数counterが0の場合にまたtext()を使い0を出力します。

サンプル

サンプルはこちら。
サンプルではspan要素にstyleで装飾しています。

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryでフォーム改善：文字数のカウントアップ