Twitterみたく残り入力文字を表示するプラグイン
先日の勉強会でちょっと話題になったので、作ってみました。
/** * @name jCount * @description 指定されたエレメントの残り文字数をカウントします * @param count 最大文字数(必須) * @param option 残り文字数を表示するエレメント(指定しない場合は<span class="maxcount" />になります * @type jQuery * @cat Plugins/jCount * @author devworks */ jQuery.fn.jcount = function(count, option) { var c; var counter = this; if (arguments[1]) { c = $(option); } else { c = $("<span class='maxcount' />"); } c.html(count - counter.val().length); counter.after(c); this.keyup(function() { var length = counter.val().length; var lcount = count - length; if (lcount > 0) { c.html(lcount); } else { counter.val(counter.val().substring(0, count)); c.html("0"); } }); return counter; }
使い方は
$(document).ready(function({ $('#カウント対象要素のID).jcount(10); });
とすると対象要素に
<span class="maxcount">
という要素が追加されます。
$(document).ready(function({ $('#カウント対象要素のID).jcount(10, '#残文字数を出力する要素のID'); });
とすれば、残文字数を出力する要素を指定できます。一応制限文字数に達したらそれ以上入力できないようになってます。textarea要素とかには便利だと思います。余談ですがtextarea要素にもmaxlength属性が欲しいなぁとか思います。
一応ちゃんと動きますがソースには修正の余地がアリアリだと思うので添削してください><