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

HTMLソース

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

Javascriptソース

[sourcecode language=’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”);
}
});
});
[/sourcecode]

変数の説明

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

カウントダウンの設定

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

入力文字数が0の場合

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

サンプル

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

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