前回、「jQueryを使った入力文字数カウンタープラグインinputCountを作りました | 1bit::memo」という記事とプラグインを作成しました。今回は逆に、指定された文字数からカウントダウンしていくプラグインを作りました。twitterのような、残り指定文字数を表示したい時に便利なのではないでしょうか?
確認環境
- jQuery1.9.0、1.7.2で動作確認
使い方
- jQuery本体とdownCountを読み込みます。
- input要素またはtextarea要素に識別IDを割り振っておきます。
- カウンターを表示したい要素も作っておきます。
- downCountをカウントしたいフォームに対して使用します。
jQuery文字数カウンタープラグイン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'});