wordCounter jQuery Plugin

A simple word counter plugin for jQuery. Once active, the counter div displays the word count from the target text field. The target could be a textarea or a text box.

Depending on the options supplied, the count could be the total sum or remaining amount of words entered into the target text field.

If the negative numbers option is supplied then the count will show a negative value if the word limit has been passed.

Updates in version 2.0.0

In version 2.0.0 the plugin was total re written to allow the preventInput option.  If the limit is reached and  preventInput is true then the user will not be able to input any more text into the target.  The only key allowed is the backspace. An example of this can be found here

 Source

• wordCounter is on GitHub: https://github.com/pfwd/wordCounter
• jQuery plugins: http://plugins.jquery.com/project/wordCounter (current version is 2.0.0)

Examples:

• Counting the amount of words in a target
• Adding a limit
• Changing the default message when the limit option is not added
• Changing the default message when the limit is exceeded
• Changing the default message when the limit has not been exceeded
• Changing the default search term
• Showing negative numbers
• Preventing further input if limit is reached

Counting the amount of words in a target

This is as simple as it gets. Provide the id of the target input and the id of the counter div. The counter div will show the current total of words in the target. The format in the counter div will be: “Word Count: TOTAL_COUNT“.

Adding a limit

By adding the limit option, the plugin will check if the amount of words in the target input are greater than the supplied limit option. If this is the case the default message in the counter div will be “Remove AMOUNT_OF_WORDS_TO_REMOVE word(s)“. In the below example the limit is set to 1. When the second word is removed the message in the counter div changes to be “Words left: 0“. This is because the limit of 1 is now reached. By removing the both words the message in the counter div changes to “Words Left: 1″.

Changing the default message when the limit option is not added

By default the limit option is not active and the default message in the counter div will display the current word count. You can change the default message if it doesn’t suit your application. To do so, simply use the defaultNoLimitFormat option to add a custom message. Include the term “count%” to display the sum of words.

Changing the default message when the limit is exceeded

The default message “Remove count% word(s)” is displayed in the counter div if the limit has been exceeded You can change the default message if it doesn’t suit your application. To do so, simply use the limitExceededFormat option to add a custom message. Include the term “count%” to display the sum of words. In the below example the limit option is set to 5 and the limitExceededFormat option is set to “You have gone over the limit by count% words!“. When entering the 6th word this message is displayed in the counter div.

Changing the default message when the limit has not been exceeded

The default message “Words left: AMOUNT_OF_WORDS_LEFT” is displayed in the counter div if the limit option has been supplied but the limit has not yet been exceeded. You can change the default message if it doesn’t suit your application. To do so, simply use the limitNotExceededFormat option to add a custom message. Include the term “count%” to display the sum of words. In the below example the limit option is set to 5 and the limitNotExceededFormat option is set to “You still have count% words to go“. This message is displayed until the 6th word is entered.

Changing the default search term

By default the message formats replace the search term “count%” with the current word count. This search term can be changed by setting the option defaultSearch. In the below example the defaultSearch option is set to “word_count%” and both the format options include this term in their messages.

Showing negative numbers

By default the return count is a positive digit. This can might not suit all application and you may wish to show a negative number if the limit has been exceeded. This can be achieved by setting the option showNegativeNumbers to 1. In the below example a negative number will be shown if the word count is greater than 5. On the 6th word the counter will be -1, on the 7th word the counter will be -2 and so on.

Preventing further input if limit is reached

As request by Irvin in a comment  below the plugin now prevent further input if the preventInput option is true and limit has been reached.

Both the preventInput and limit options are required for this to work.