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

Warning: count(): Parameter must be an array or an object that implements Countable in /home/markcrest/web-park.org/public_html/wordpress/wp-includes/class-wp-comment-query.php on line 405

COMMENT PLEASE!!

トラックバック

「jQueryでフォーム改善:文字数のカウントアップ」のトラックバックURL

Warning: Use of undefined constant display - assumed 'display' (this will throw an Error in a future version of PHP) in /home/markcrest/web-park.org/public_html/wordpress/wp-content/themes/default/single.php on line 105
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