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

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でフォーム改善：文字数のカウントダウン