テキストフォームに入力した文字数をカウント表示してくれるjQuery プラグインがTextChangeです。
Twitterのように140文字を上限とした場合、入力文字数に応じて140 からカウントダウンしていき、140文字を超えると「負」の値で表示されます。
TextChangeのダウンロード
以下のページより TextChangeのファイルをダウンロードします。Textchange
TextChangeの設置
jQueryファイルと一緒にjquery.textchange.min.jsファイルを<body>直前に設置します。|
1 2 3 4 5 6 7 |
<script src="./jquery.min.js"></script> <script src="./jquery.textchange.min.js"></script> <script> $('#twitter').bind('textchange', function (event, previousText) { $('#countdown').html( 140 - parseInt($(this).val().length) ); }); </script> |
#textchangeはテキストエリア、#countdownはカウントダウンを表示するエリアになります。
また、今回はTwitter同様に140文字を指定していますが、5行目の140の数値は自由に変更できます。
フォームの用意
フォームと入力文字数カウントを設置します。|
1 2 3 4 5 6 |
<div class="box"> <div class="textarea"> <textarea id="twitter" cols="40" rows="5"></textarea> </div> <strong id="countdown">140</strong> </div> |
簡単なサンプルを以下に用意しました。
Twitterと同様に140文字を上限として、文字を入力するごとに「140」の数字が減っていき、140文字を超えると「負」の値になります。
Textchange による数値カウントダウンのデモ
コメント