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

Javascript

2009.10.26

入力文字数制限のあるフォームで、後何文字入力していいかわからず打ち直した経験はありませんか?
前回は何文字入力しているかをカウントしましたが、今回はその逆です。

HTMLソース

input要素のmaxlength属性に最大入力文字数を入れます。
後のspan要素にある数字がカウントダウンするようにJavascriptで設定します。

<input type="password" id="input-down" maxlength="6"/><span id="countDown">6</span>

Javascriptソース

$(function(){
	$(":password").keyup(function(){
		var maxChars = $(this).attr("maxlength");
		var counter = $(this).val().length;
		$("#countDown").text(maxChars - counter);
		if(counter == maxChars){
			$("#countDown").text("0");
		}
	});
});

変数の説明

maxCharsはinput要素のmaxlength属性の値を取得しています。
counterは前回と同様、input要素に入力された文字数を取得しています。

カウントダウンの設定

5行目にカウントダウンの設定をしています。
変数maxCharsの値から、変数counterの値を引いています。
つまり「最大入力数(6)-入力した文字数」です。

入力文字数が0の場合

これは前回と同様の理由で0の場合を設定しています。
今回はカウントダウンなので、変数counterと変数maxCharsが同じになった時に0を出力します。

サンプル

サンプルはこちらをどうぞ。

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. jQueryでフォーム改善:文字数のカウントダウン
オススメ本(既読)
読んでみたい本(未読)

COMMENT PLEASE!!

トラックバック

「jQueryでフォーム改善:文字数のカウントダウン」のトラックバックURL
http://web-park.org/javascript/form091025.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