textCounting jQuery Plugin

jQuery textCounting Plugin

The jQuery textCounting plugin will count the number of characters or 'words' (blocks of characters separated by one or more spaces) in a <textarea> every time a character is typed in the <textarea>, and will display either the number of words or characters in the <textarea> or how many words or characters can still be typed before reaching the set limit.

The default behavior of the plugin is to display the number of characters left before reaching the limit (a character countdown). You can use the plugin for this purpose "as is" (without specifying or changing any settings) if you follow these conventions in your coding:

• The <textarea> must have an "id" attribute with a unique value and a "maxTextLength" attribute with an integer denoting the character limit.
• The display element (<p>, <span>, <div>, etc.) where you want the countdown displayed must have an "id" attribute whose value is the combination of the <texarea>'s "id" value and the word "Down".

Here's an example of a <textarea> and a <span> element that fit the convention:

<textarea id="comments" maxTextLength="1000" rows="4" cols="60"></textarea>
<p>Characters left: <span id="commentsDown"></span></p>

Because the element ids and the maxTextLength value is specific to each <textarea>, you can use a single call of the plugin to display a countdown for all your <textarea> elements:

<script language="javascript">
  $(document).ready(function()
    $(":input[type=textarea]").textCounting();
   });
</script>

If the default plugin behavior is not suitable, the plugin has a number of settings that can be changed. Here are a few examples:

• You can change the countWhat setting to count "words" instead of "characters."
• The countDirection setting can be set to "up" to count the words/characters in the <textarea>, "down" to count the words/characters left before hitting the limit, or "up,down" to count and display both values.
• Instead of setting the word/character limit in an attribute of the <textarea>, you can pass a comma-delimited list of limits (one per <textarea>) into the maxLengthList plugin setting, or you can make use of another jQuery plugin, the Metadata plugin, and set the limit in a block of metadata within the <textarea>'s "class" attribute.
• You can set the plugin to apply a particular CSS class to the element that displays the current count when the limit has been exceeded with the lengthExceededClass setting.

The GitHub repo contains a heavily-documented version of the plugin (where you can read more details about all of the settings and how to change them) for use in development, as well as a minified version for use in production.

Below is a demonstration of the plugin in action. You can use the "View Source" option of your browser to inspect this page and see how the demo is coded.

Textarea One:
default overflow
Characters left: 0

Textarea Two:

Characters: 0 | Characters left: 0

Textarea Three:

Words: 0 | Words left: 0