2

我正在使用下面的插件来计算 textarea 中的字符，但我想添加的唯一功能是，当字符超过限制时，它应该停止并且不允许输入更多字符。我应该只是当它匹配允许的字符时返回？

下面是带有源代码的示例链接。

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

为此进行了一些小改动。首先，监控 keydown 而不是 keyup 事件。这允许您阻止默认并阻止添加新文本。接下来，您必须允许删除和退格，以便他们可以纠正错误。您可能应该考虑很多极端情况，例如剪切/粘贴、箭头键等。这就是为什么我不喜欢在这样的东西上修改文本区域的默认行为的原因。无论如何，您应该始终进行预传输和服务器端的双重检查，所以我认为除了可能惹恼您的用户之外，它不会给您带来很多好处。

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 回答