テキストエリアの文字数カウント用プラグインを作ってみた
文字数を数えることって良くあるんですけどね。
なんか既存のものを使うわけには行かない状況になったので、軽く作りました。
使い方はこんな感じです。
[js]
$(document).ready(function(){
$("#hoge").ksTextCounter();
});
[/js]
[html]
<textarea id="hoge"></textarea>
[/html]
んで右横に入力文字数が出るという仕組みです。
一応オプションを用意しておきました。
デフォルトは下記の通りです。
[js]
defaults =
{
count_break : true,//改行を1文字とカウントするかどうか
count_spaces : true,//スペースを1文字とカウントするかどうか
maxlength : 255,//最大文字数。0で無制限
not_input_over_maxlength : false,//最大文字数を超える入力を拒否するか
alert_over_maxlength : true,//最大文字数を超えたら警告するか
count_css_for_alert : {color : "#ff0000"},//最大文字数を超えた場合の入力文字数のCSS
count_css_for_default : {color : "#000000"},//デフォルトの入力文字数のCSS
counter_element_id : null,//自前で文字数を表示する要素を用意する場合の要素ID
counter_alert_toggle_class : null//最大文字数が超えたときに適用するクラス
};
[/js]
なのでまあこういうのも出来ます
[js]
$(document).ready(function(){
$("#hoge,#hoge3").ksTextCounter();
$("#hoge2").ksTextCounter({counter_element_id : "hohoho",counter_alert_toggle_class : "alert"});
});
[/js]
最大文字数がオーバーした場合の入力は拒否する場合は強制的に以降の入力が出来なくなります。
この場合は警告の設定は全部無視します。
警告はするけど文字の断ち切りをしない場合には設定しないでください。
で、警告もしたいし断ち切りはしたいし、という人もいると思いまして、
カスタムイベントを発生するようにしました。
設定した最大文字数をオーバーさせた場合だけKSTEXTCOUNTER_MAXLENGTH_OVERが発生しますので、キャッチして適当に設定してください。
[js]
$(document).ready(function(){
$("#hoge").on(‘KSTEXTCOUNTER_MAXLENGTH_OVER’,function(){alert(1);});
});
[/js]
動きはこっちでも見てください。
[tip]DEMO[/tip]
ファイルはこっちにおいておきましたので。
一応MITライセンス条項書いときました。
最近適当に使っていいって置いておいても動かないとかなんか変な動きしたとかでクレームがやばいという話を聞いたもので。
[important]
jquery.ksTextCounter.js[約3.2kB]
[/important]
