jQuery Word and character counter plug-in!

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! Custom language translation	There are various defaults set based on the type, count options being used. You can set your own message to be added after the input field using this plugin. If you want the message off, just set the text to false. Optionally, you can use the translation option to translate the default language of the message that is shown after the input field.
target	false || custom selector String	Passing a valid jQuery selector will use that DOM element to place the counter on the page.
append	true || false	By default, inserts the counter after the desired DOM element. If set to false, this will place the counter before the (either custom or default) target element.

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

---

Content Editable

Also supports DOM elements with contenteditable set to true.

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

Translate message

New in 2.2!

By providing a String of 4 words separated by space, you can include your own translation used to build the message you show to your users.

Translate the following words (from English)

• character
• word
• remaining
• maximum

Then, all you need to do is pass them as a String (in order) as the option 'translation'.

				        $("#translate_words").counter({
					        goal : 10,
					        type : 'word',
					        translation : 'caracter palavra restante màx'
					    });

				         $("#translate_char").counter({
					        goal : 10,
					        count : 'up',
					        translation : 'caracter palavra restante màx'
					    });

Custom message

New in 2.0!

Let's say you don't like the default text appended to the counter. 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'
					});

Courtesy of Gator92 New in 2.1

Append/Target

With these new options, you can now place the counter anywhere on the page.

You can have the counter insert before/after the input you are counting (defaults to after/true) by setting a boolean value to the append property.

You can also target any element on the page to insert the counter by passing a jQuery selector to the target property.

			            $('#append-target').counter({
					        append: false,
					        target: '#append-here'
					    });

In this example, we are using a custom target to move the counter. We're also setting append to false so that it can be above our target area.

Courtesy of thomasgohard via pull #11

Let's say you have multilple counters on a single page and want them all to be styled the same way. In this case, we have a class named 'wrapper'. All you need to do is set the containerClass property to the name of the class.

This will add the classname to the counter, giving you an easy way to style multiple counters.

			            .wrapper {
						  font-size: 11px;
						  border: 1px solid green;
						  border-radius: 50px;
						  width: 40%;
						  padding: 10px;
						}
					

			            $('#myInput').counter( {
						   containerClass: 'wrapper'
						});