CODEWITHSUNDEEP
jquery
Nick Kahn
Nick Kahn

Reputation: 20078

jQuery plugin: character count for textareas

i am using the below plugin for counting the char in the textarea but the only feature i would like to add is that when the character is exceed the limit then it should stop and not allow any more characters to be entered.. so should i just return when it match the allowed character?

below is the sample link with source code.

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

Upvotes: 2

Views: 1402

Answers (1)

mrtsherman
mrtsherman

Reputation: 39872

A couple small changes for this. First, monitor keydown instead of keyup event. This allows you to preventDefault and keep the new text from being added. Next, you have to allow delete and backspace so that they can correct their mistake. There are a lot of corner cases that you should probably account for like cut/paste, arrow keys, etc. That's why I don't like modifying the default behavior for the text area on something like this. You should always do pretransmit and server side double checking anyways so I don't think it gets you a lot other than the potential to annoy your users.

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

Upvotes: 2

Related Questions