• RSS

[JS]フォームの入力文字数をカウントするjQuery プラグイン「Textchange」

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

テキストフォームに入力した文字数をカウント表示してくれる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 による数値カウントダウンのデモ



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください