入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対して色々なオプションを持たせて動作させることができます。
ダウンロードはこちらから
「残り文字数をカウントダウン」を実装
<!-- head --> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.textchange.js" type="text/javascript"></script> <!-- body --> <textarea id="div631" maxlength="140"></textarea> <span id="div631-cd">140</span>
jquery.textchange.jsを読み込んで、対象のテキストエリアもしくはテキストボックスを実装
$('#div631').bind('textchange', function (event, previousText) {
$('#div631-cd').html( 140 - parseInt($(this).val().length) );
});
テキストエリアもしくはテキストボックスの入力が変わるたびに文字数をカウントし、カウントダウンしてくれます。
デモ
これ以外にも便利そうなオプションが色々ありそうで、試してみたいです。
サイトより
Plugin Tested in FireFox (3, 3.5, 3.5, Win/OS X), Safari 4, Chrome 5, IE (6, 7, 8)
関連記事
-
-
Lightboxなどが実装できるプラグイン「Magnific Popup」
「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや
-
-
テキストに動きをつけるプラグイン
テキストをフェイド・スライド「Textillate」 テキストをフェイドイン(アウト)、スライドイン(アウト)してくれます。 ダウンロード デモ My Tit
-
-
クリックするとテキストボックスにかわるラベルを実装
Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
- PREV
- vs SQLite コマンド対応表
- NEXT
- Sessionコンポーネント
Comment
jQuery: 入力テキストの文字数をカウントしてくれる「Textchange」 http://kwski.net/jquery/631/ @kwski3さんから