[JS]フォームの入力文字数をカウントするjQuery プラグイン「Textchange」
テキストフォームに入力した文字数をカウント表示してくれるjQuery プラグインが TextChange です。
Twitterのように140文字を上限とした場合、入力文字数に応じて140 からカウントダウンしていき、140文字を超えると「負」の値で表示されます。
TextChange のダウンロード
以下のページより TextChange のファイルをダウンロードします。TextChange の設置
jQuery ファイルと一緒に jquery.textchange.min.js ファイルを <body> 直前に設置します。<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
の数値は自由に変更できます。フォームの用意
フォームと入力文字数カウントを設置します。<div class="box"> <div class="textarea"> <textarea id="twitter" cols="40" rows="5"></textarea> </div> <span id="countdown">140</span> </div>
簡単なサンプルを以下に用意しました。
Twitterと同様に 140 文字を上限として、文字を入力するごとに「140」の数字が減っていき、140 文字を超えると「負」の値になります。
Textchange による数値カウントダウンのデモ
コメント