jQueryを使った入力文字数カウントダウンプラグインdownCount

2013.2.5

前回、「jQueryを使った入力文字数カウンタープラグインinputCountを作りました | 1bit::memo」という記事とプラグインを作成しました。今回は逆に、指定された文字数からカウントダウンしていくプラグインを作りました。twitterのような、残り指定文字数を表示したい時に便利なのではないでしょうか？

確認環境

• jQuery1.9.0、1.7.2で動作確認

使い方

• jQuery本体とdownCountを読み込みます。
• input要素またはtextarea要素に識別IDを割り振っておきます。
• カウンターを表示したい要素も作っておきます。
• downCountをカウントしたいフォームに対して使用します。

注意点

downCountにはオプション設定が2つあります。

• element…カウンターを表示したい要素（classまたはid）の指定です。何も設定しない場合は.countクラスになります。
• num…カウンター初期数値（半角数字）の指定です。何も設定しない場合は100文字からスタートとなります。
• 0文字を超えると、マイナスとして計算されます。0文字で止まる処理は行っておりません。

//.countクラスに100文字のdownCountを指定
$('#name').downCount({element: '.count'});
//.count2クラスに32文字のdownCountを指定
$('#message').downCount({num:32, element: '.count2'});

デモ

downCountデモ

ダウンロード

ダウンロード