modifying words count jquery function

Question

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

I think you need to check that spelling - did you mean 'count words' — Dave Sexton
– Dave Sexton, Commented Jan 7, 2013 at 11:39
can I know why I can get minus votes for this question? I am very new to jquery and want to improve my knowledge with professions. — TNK
– TNK, Commented Jan 7, 2013 at 11:50
Note: I didnt downvote. I can suggest that the downvotes were probably to do with this being the most basic of basic questions (essentially: How do I initialize a plugin passing parameters). As SO expcts you to do basic research before asking a question, people tend to downvote the very basic which can usually be answered by reading relevant documentation - in this case using jQuery plugins. Another possibility (although unlikely) is a rather unfortunate typo leading the word count to be... well... a rather nasty swear word — Jamiec
– Jamiec, Commented Jan 7, 2013 at 12:26
FWIW - I think the downvotes are a bit harsh here. You may have not researched properly, but you've asked a good question and shown your valid code. Im +1 to counter a bit! — Jamiec
– Jamiec, Commented Jan 7, 2013 at 12:28

Jamiec · Accepted Answer · 2013-01-07 11:36:46Z

1

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

answered Jan 7, 2013 at 11:36

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sapan Diwakar · Accepted Answer · 2013-01-07 11:46:40Z

1

Use it like this:

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

edited Jan 7, 2013 at 11:46

answered Jan 7, 2013 at 11:35

Sapan Diwakar

11k6 gold badges35 silver badges43 bronze badges

1 Comment

Jamiec Over a year ago

Although upvoted, I dont think this properly answers the question. The OP specified he has multiple textareas and wants different settings for each. This answer shows how to change the limit for all textareas on the page to the same limit.

Collectives™ on Stack Overflow

modifying words count jquery function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related