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!

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'
  • 2.5.0 Support jQuery 3.0
  • 2.4.5
    • Added support for DOM elements with the contentedtiable attribute set to true.

      Suggested here by Globulopolis
  • 2.4.4
  • 2.4
  • 2.3
    • Added ability to use a custom DOM element to place the counter. Also includes an update for placement of the counter (before of after the DOM element.)

  • 2.2
    • Added ablity to use custom language message used for the default message used in this plugin.

      Suggested (and sample code provide) by @johnleniel
  • 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?

Check out the plugin on github

Thank you.

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