AP Text Counter

AP Text Counter is designed to be an easy-to-use jQuery component to implement a text counter to display the number of characters left (or typed) while limiting entry at the same time. Typical to common jQuery components this one works by selecting some DOM element or series of DOM elements, calling “apTextCounter”, and applying some parameters. Click HERE to download now!

The simplest implementation requires only that you specify the maximum number of character to limit the text entry to. To do so would look like this.

1
2
3

$("#textarea").apTextCounter({
	maxCharacters: 25
});

This bit of code will limit the selected text area to 25 characters maximum. If we then wanted to display how many we had left to type, we could create a paragraph and then tell AP Text Counter where that is located.

1
2
3
4
5
6
7

<textarea id="textarea" cols="30" rows="5"></textarea><br />
<p id="tracker"></p>
 
$("#textarea").apTextCounter({
	maxCharacters: 25,
	tracker: "#tracker"
});

For more examples check out the demo page!

Properties:

  • maxCharacters: Maximum characters allowed to enter into the selected element
  • tracker: ID of the DOM element used to display the number of characters left (or typed)
  • trackerTemplate: Template used to insert into the tracker DOM element. “%s” (without quotes), will be replaced by the number of characters left (or typed)
  • direction: Count “up” or “down”. “down” tells AP Text Counter to count how many characters are left to type. “up” tells AP Text Counter how many characters you’ve typed
  • scope: Used by AP Text Counter when calling “callback” methods. If specified this component will call your callbacks with the provided scope.

Callbacks: Note that all callbacks receive two parameters: count, and config. Count is the number of characters left (or typed), and config contains the configuration parameters passed into AP Text Counter.

  • onCharacterCountChecked: Fired after the number of characters typed is counted
  • onMaxCharactersReached: Fired when the maximum number of characters specified in the config is reached
  • onTrackerUpdated: Fired when the tracker DOM element is updated