[JS]フォームの入力文字数をカウントするjQuery プラグイン「Textchange」
スポンサード
また、今回はTwitter 同様に140 文字を指定していますが、5 行目の
簡単なサンプルを以下に用意しました。
Twitterと同様に 140 文字を上限として、文字を入力するごとに「140」の数字が減っていき、140 文字を超えると「負」の値になります。
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 による数値カウントダウンのデモ
スポンサード
コメント