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