close

Works with the latest release of jQuery

# jQuery Word and character counter plug-in!

- jQuery counter plug-in
- default
- characters
- words
- custom msg
- infinite
- append/target
- container class

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!

Bacon ipsum dolor sit amet beef short loin pork belly strip steak venison, pig bacon tenderloin ribeye ham hock pastrami fatback brisket meatloaf. Flank ribeye chicken ball tip, shoulder pastrami turkey.

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.

Type In Here

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

Bacon ipsum dolor sit amet beef short loin pork belly strip steak venison, pig bacon tenderloin ribeye ham hock pastrami fatback brisket meatloaf. Flank ribeye chicken ball tip, shoulder pastrami turkey.

### 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.

Bacon ipsum dolor sit amet beef short loin pork belly strip steak venison, pig bacon tenderloin ribeye ham hock pastrami fatback brisket meatloaf. Flank ribeye chicken ball tip, shoulder pastrami turkey.

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

Bacon ipsum dolor sit amet beef short loin pork belly strip steak venison, pig bacon tenderloin ribeye ham hock pastrami fatback brisket meatloaf. Flank ribeye chicken ball tip, shoulder pastrami turkey.

### 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.

id = 'append-here'
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'
    						});