close

Works with the latest release of jQuery (version 1.4.2)!

jQuery Word and character counter plug-in!

jquery.counter.js (7.92k)
jquery.counter.min.js (2.60k)
Word and character counter at plugins.jquery.com

This jQuery counter plug-in allows you to count characters or words, either up or down. You can set a goal for the counter to reach.

It will insert a div with an id of the name of the input area you are counting with a "_counter" suffix. For example, if the input you want to count is called "countMe", the id of the div that keeps track of the count will be "countMe_counter".

Simple? You bet your ass it is.

Name value Description
type (default) char  || word Count characters or words by using 'char' or 'word' respectively.
count (default) down || up Count up or down to or from your goal
goal (default) 140 The goal number. If you are counting down, the counter will start on this number. If however you are counting up, the counter will end on this number.

Update!

The most basic way to use the counter is to simply use the selector of what text field you want to count.

            //In this case, the id of the following input box is "default_usage"
            $("#default_usage").counter();
        

Start typing!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum magna ligula. Sed quis mauris quam. Nunc luctus cursus nibh, quis sodales erat malesuada nec.

Copy & paste the text to the right of the input box into the text area. You will notice that the text gets cut off, not allowing you to paste, or type any further.

By default, this plugin will count characters. Also by default, it will count down. Lets see how counting up to ten will look:

            $("#charUp").counter({
            count: 'up', 
            goal: 10
            });
            

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum magna ligula. Sed quis mauris quam. Nunc luctus cursus nibh, quis sodales erat malesuada nec.

Since by default this plugin counts characters, you have to set the type option to word like so:

         $("#wordDown").counter({
            type: 'word', 
            goal: 20
        });
    

For the smart asses who copy and paste more than the words allowed, this plugin simply blanks out the text entirely. Either you type the words and let it count or not; no copy and paste! The same goes for counting words up.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum magna ligula. Sed quis mauris quam. Nunc luctus cursus nibh, quis sodales erat malesuada nec.



Similarly, if you want to count words up, you would set the count option do up like so:

        $("#wordUp").counter({
            type: 'word',
            goal: 20,
            count: 'up'            
        });
    

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum magna ligula. Sed quis mauris quam. Nunc luctus cursus nibh, quis sodales erat malesuada nec.

Questions, comments? Email webdevbx at yahoo dot com

Thank you.

Word and character counter at plugins.jquery.com