jQueryでフォーム改善:文字数のカウントアップ

Javascript

2009.10.17

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

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

HTMLソース

span要素内の数字がカウントアップされます。

<textarea type="text" id="input-up"></textarea>
<span id="countUp">0</span>

Javascriptソース

$(function(){
	$("textarea").keyup(function(){
		var counter = $(this).val().length;
		$("#countUp").text(counter);
		if(counter == 0){
			$("#countUp").text("0");
		}
	});
});

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でフォーム改善:文字数のカウントアップ
オススメ本(既読)
読んでみたい本(未読)

COMMENT PLEASE!!

トラックバック

「jQueryでフォーム改善:文字数のカウントアップ」のトラックバックURL
http://web-park.org/javascript/form091016.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook