CODEWITHSUNDEEP
jquery
TNK
TNK

Reputation: 4323

modifying words count jquery function

(function($){
    $.fn.textareaCounter = function(options) {
        // setting the defaults
        // $("textarea").textareaCounter({ limit: 100 });
        var defaults = {
            limit: 150
        };  
        var options = $.extend(defaults, options);

        // and the plugin begins
        return this.each(function() {
            var obj, text, wordcount, limited;

            obj = $(this);
            obj.next(".hint").after('<span style="font-size: 11px; font-weight: bold; color:#6a6a6a; clear: both; margin: 3px 0 0 150px; float: left; overflow: hidden;" id="counter-text">Max. '+options.limit+' words</span>');

            obj.on("keyup keydown", function() {
                text = obj.val();
                if(text === "") {
                    wordcount = 0;
                } else {
                    wordcount = obj.val().split(" ").length;
                }
                if(wordcount == options.limit) {
                    obj.next(".hint").next("#counter-text").html('<span style="color: #DD0000;">0 words left</span>');
                    limited = $.trim(text).split(" ", options.limit);
                    limited = limited.join(" ");
                    $(this).val(limited);
                } else {
                    obj.next(".hint").next("#counter-text").html((options.limit - wordcount)+' words left');
                } 
            });
        });
    };
})(jQuery);

I use above jQuery function to count words that are typing in a textarea. At the moment its working for me. With this script I can count words in all textareas in my forms that limit to 150 words.

But I need to apply this function to textarea to count words with different limit criteria. That mean 1 textarea with 150 words, one with 100 words, one with 60 words etc... can anybody here help me to do this modification?

NOTE: I use this function something like this.. $("textarea").textareaCounter();

Upvotes: 0

Views: 166

Answers (2)

Sapan Diwakar
Sapan Diwakar

Reputation: 10946

Use it like this: 

$("#textarea-id").textareaCounter({
     limit:100 // world limit here
});

Upvotes: 1

Jamiec
Jamiec

Reputation: 136094

All you should have to do is set up the settings differently for specific textarea fields.

So this is a very generic solution:

$("textarea").textareaCounter();

It tells every textbox to use the default. You can use id's (or classes) to set different settings to specific textareas

In the following example it assumes 2 textareas on the page one with an id of my100limittextarea the other my150limittextarea

$("#my100limittextarea").textareaCounter({limit:100});
$("#my150limittextarea").textareaCounter({limit:150});

Upvotes: 1

Related Questions