jQuery Word and character counter plug-in! 2.1

jquery.counter-2.1.js 7.64kb
jquery.counter-2.1.min.js 2.9kb
Word and character counter at plugins.jquery.com

This jQuery Word and character counter plug-in allows you to count characters or words, up or down. You can set a minimum or maximum 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.

• Show only the counter and not the additional text.
• Set a minimum number the user much reach. You set the function to be excecuted when they go above or below the minimum you set.
• Bug fixes
• Optimized

Name	Value	Description
type	char || word	Count characters or words by using 'char' or 'word' respectively.
count	down || up	Count up or down to or from your goal
goal	140 || x || 'sky'	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. Sky's the limit! Setting the goal to the string 'sky' enables counting up, infinitely without stopping the user.
text	true || false	Set false if you only want the numbers to show and not the words (msg).
msg	x character(s)/word(s) left x character(s)/word(s) (y max) Your message here!	There are various defaults set based on the type, count conditions being used. You can also set your own message to be added after the counter. If you want the message off, just set the text to false.

Default Usage

The most basic way to use the counter is to simply call the counter() method on a jQuery object.

            			$("#default_usage").counter();

Start typing!

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

---

Numbers Only

If you want the numbers only Twitter feel, use the text option.

            			$("#default_usage_num_only").counter({
							text: false
						});       			

Character Count

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

Word Count

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

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

New in 2.0!

After a user pastes more than the words allowed, the extra words will be removed.

---

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

Custom message

New in 2.0!

Let's say you don't like the default text appended to the coutner. Simple, just change it.

				        $("#custom_msg").counter({
				            msg: 'words left before you fall into a pit of emptiness.'
				        });
				    

New in 2.1!

Sky is the limit! (Cheesy, I know.)

Setting the goal to the string 'sky' (with quotes) overrides the count to up and removes the default message. You can optionaly put your own custom message by using the msg option.

					$("#keepCountingChar").counter({
						goal: 'sky'
					});
					

					$("#keepCountingWord").counter({
						goal: 'sky', 
						type : 'word', 
						msg : 'amazing words'
					});
					

Log:

• 2.1
  • Added new 'Sky' string value to the goal option that enforces counting up without a limit.
  • Pasting over the limit when counting down does not show negative numbers
• 2.0
  • Added ability for custom messages.
  • Modularized functions and made enhancements.
  • Text only: Gives you the option to only display the amount of words/characters remaining (or counting up to), kinda like twitter.
  • Paste in words past limit: Before, I had it that once you paste over the allowed words, the whole field will blank out. This time, I have it so that it cuts off the extra words!
• 1.0: initial release

Questions, comments? Email webdevbx at gmail dot com

Thank you.

Word and character counter at plugins.jquery.com