私はこれを見ました:
http://www.scriptiny.com/2012/09/jquery-input-textarea-limiter/
その後、それをjqueryウィジェットに拡張しました。
はい、私はそれが完全に過剰に設計されていることを知っています。ウィジェットについてもっと学ぶためにそれをしました。しかし、プラス面としては、使い方が非常に簡単です。テキストエリアでウィジェットを呼び出すだけです:
$(selector).limiter();
たくさんのパラメーターがあります。オプションを介してオブジェクトとして送信できます。
$(selector).limiter({maxChars:1000,warningChars:990});
css にクラス スタイルを追加できることに注意してください。ここでは、warningChars 値のときに警告テキストの色を変更するために jqueryui css がインストールされていると仮定します。.ui-limiter-chars {position: absolute;padding-left: 1em;} のようなものでうまくいく可能性があります...
フィドルを見てください... http://jsfiddle.net/DE5m9/2/
$.widget("ui.limiter", {
options:{
limiterClass:'ui-limiter-chars ui-widget-content',
limiterTag:'small',
maxChars:100,
warningClass:'ui-state-error-text',
warningChars:90,
wrapperClass:'ui-limiter-wrapper ui-widget',
tagName:'TEXTAREA'
},
_create: function(){
// make sure that the widget can only be called once and it is only called on textareas
var o = this.options;
if (($(this).attr('aria-owns') === undefined ) && (this.element[0].tagName === o.tagName)) {
var self = this;
var id = Math.random().toString(16).slice(2, 10).replace(/(:|\.)/g, '');
// ids = array of id of textarea, wrapper, and limiter chars ids.
this.ids = [(this.element.attr('id') || 'ui-limiter-' + id),'ui-limiter-wrapper-'+id,'ui-limiter-chars-'+id];
this.element[0].id = this.ids[0];
var limiterWrapper = $('<div/>',{
'class':o.wrapperClass,
'id':this.ids[1]
});
// semantically, this seems to be a good fit for a small tag. ie not important.
var limiterChars = $('<'+o.limiterTag+'/>', {
'class': o.limiterClass,
'id': this.ids[2]
});
$('#'+this.ids[0]).wrap(limiterWrapper);
$('#'+this.ids[0]).after(limiterChars);
$('#'+this.ids[0]).attr('aria-owns',this.ids[2]);
$('#'+this.ids[0]).on("keyup focus", function() {
self._setCount($('#'+self.ids[0]), $('#'+self.ids[2]));
});
this._setCount($('#'+this.ids[0]), $('#'+this.ids[2]));
}
},
_setCount:function (src, elem) {
var o = this.options;
var chars = src.val().length;
if (chars > o.maxChars) {
src.val(src.val().substr(0, o.maxChars));
chars = o.maxChars;
}
$('#'+this.ids[2]).text(o.maxChars - chars );
if (chars > o.warningChars)
{
$('#'+this.ids[2]).addClass(o.warningClass);
}
else
{
$('#'+this.ids[2]).removeClass(o.warningClass);
}
},
destroy: function(){
$('#'+this.ids[2]).remove();
$('#'+this.ids[0]).unwrap();
$('#'+this.ids[0]).removeAttr('aria-owns');
$.Widget.prototype.destroy.call(this);
},
});