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

テキストフォームに入力した文字数をカウント表示してくれるjQuery プラグインが TextChange です。

Twitterのように140文字を上限とした場合、入力文字数に応じて140 からカウントダウンしていき、140文字を超えると「負」の値で表示されます。

1 TextChange のダウンロード
2 TextChange の設置
3 フォームの用意

TextChange のダウンロード

以下のページより 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 による数値カウントダウンのデモ