Question

我正在使用下面的插件来计算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);

Answer 1

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

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);

jQuery插件：textareas的字符数

1 个答案: