charCount.jsを使ってみた

　Twitterの後何文字入力出来るか的な表示をするためのcharCount.jsを使ってみた。jQueryのプラグインとして実装されていて、使い方は非常に簡単。jQueryオブジェクトのval()で文字列が取れればいいので、input、textarea、selectタグに適用出来る。selectに適用する意味は全く無いので実際はinputとtextareaだけだろう。

<input type="text" id="txt" />
<script type="text/javascript">
$('#txt').charCount();
</script>

　他のjQueryプラグインを使ったことがあれば特に難しい事は無い。ただ、デフォルトだと文字数が140文字、残り25文字以下で警告色になるという仕様なので、当然変更する必要がある。

$('#txt').charCount({
    allowed: 10 // 最大文字数
    ,warning: 3 // 警告「残」文字数
});

 　これで最大文字数は指定出来るがメッセージがそっけないことになる。

　一応counterTextを引数に渡せば数値の「前」に表示する文字列を指定することが出来る。この「前」というのが制限で「後○○文字入力できます」的な表現が出来ない。本家のドキュメント的には「残文字数：」的なメッセージを入れることを想定しているようだ。counterTextは文字列でもいいけど、関数であった方がいいのでは？ということで若干手を入れる。全文掲載していいのかわからないので差分だけ。元通りの文字列としても使えるように関数かどうかを$.isFunctionで判定。

 46c46
<                       $(obj).next().html(options.counterText + available);
---
>                       $(obj).next().html($.isFunction(options.counterText) ? options.counterText(available) : options.counterText + available);
50c50,51
<                       $(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
---
>                       var txt = $.isFunction(options.counterText) ? options.counterText() : options.counterText;
>                       $(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ txt +'</'+ options.counterElement +'>');

 　これで残り0文字の時やマイナスになった時で表示を変えたい場合にも対応出来る。まあ、spanタグとかの表示そのものから関数化するのもありだが、そこまで手を入れると引数が変わるので今回はここを修正。

 $(document).ready(function() {
	$('#txt').charCount({
		allowed: 10
		,warning: 8
		,counterText: function(available) {
			if (available > 0) {
				return '後' + available + '文字入力できます。';
			} else if (available == 0) {
				return 'これ以上入力出来ません。';
			} else {
				return Math.abs(available) + '文字オーバーしています。';
			}
		}
	});
});

 　これで上記の様に書けば、以下のような感じになる。