2

テキストエリアの文字をカウントするために以下のプラグインを使用していますが、追加したい唯一の機能は、文字が制限を超えたときに停止し、それ以上文字を入力できないようにすることです..許可された文字と一致したときに戻りますか?

以下はソースコード付きのサンプルリンクです。

http://cssglobe.com/lab/charcount/01.html

(function($) {

    $.fn.charCount = function(options){

        // default configuration properties
        var defaults = {    
            allowed: 140,       
            warning: 25,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: ''
        }; 

        var options = $.extend(defaults, options); 

        function calculate(obj){
            var count = $(obj).val().length;
            var available = options.allowed - count;
            if(available <= options.warning && available >= 0){
                $(obj).next().addClass(options.cssWarning);
            } else {
                $(obj).next().removeClass(options.cssWarning);
            }
            if(available < 0){
                $(obj).next().addClass(options.cssExceeded);
            } else {
                $(obj).next().removeClass(options.cssExceeded);
            }
            $(obj).next().html(options.counterText + available);
        };

        this.each(function() {              
            $(this).after('<'+ options.counterElement +' class="' + options.css + '">'+ options.counterText +'</'+ options.counterElement +'>');
            calculate(this);
            $(this).keyup(function(){calculate(this)});
            $(this).change(function(){calculate(this)});
        });

    };

})(jQuery);
4

1 に答える 1

2

これにはいくつかの小さな変更があります。まず、keyup イベントの代わりに keydown を監視します。これにより、Default を防止し、新しいテキストが追加されないようにすることができます。次に、間違いを修正できるように、削除とバックスペースを許可する必要があります。切り取り/貼り付け、矢印キーなど、おそらく考慮する必要がある多くのコーナーケースがあります。そのため、このようなテキスト領域のデフォルトの動作を変更するのは好きではありません. とにかく、事前送信とサーバー側の二重チェックを常に行う必要があるため、ユーザーを苛立たせる可能性以外に多くのことはないと思います。

http://jsfiddle.net/qfzkw/2/

(function($) {

    $.fn.charCount = function(options) {

        // default configuration properties
        var defaults = {
            allowed: 10,
            warning: 5,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: '',
            preventTextEntry: true
        };

        var options = $.extend(defaults, options);

        function calculate(obj, event) {

            var count = $(obj).val().length;
            var available = options.allowed - count;
            if (available <= options.warning && available >= 0) {
                $(obj).next().addClass(options.cssWarning);
            } else {
                $(obj).next().removeClass(options.cssWarning);
            }

            if (available < 0) {
                if (options.preventTextEntry && event.which != 46 && event.which != 8) { event.preventDefault() };
                $(obj).next().addClass(options.cssExceeded);                
            } else {
                $(obj).next().removeClass(options.cssExceeded);
            }
            $(obj).next().html(options.counterText + available);
        };

        this.each(function() {
            $(this).after('<' + options.counterElement + ' class="' + options.css + '">' + options.counterText + '</' + options.counterElement + '>');
            calculate(this);
            $(this).keydown(function(e) {
                calculate(this, e)
            });
            $(this).change(function(e) {
                calculate(this, e)
            });
        });

    };

    $('textarea').charCount();

})(jQuery);​
于 2012-04-14T05:54:21.403 に答える