jquery.charcounter.js

Tested in: IE7, FF1.5/2 (Windows XP), FF2 (OS X), Safari 2.0.4, Safari 3.1.1 (OS X), FF3 (OS X)

Change Log

Date	Notes
5/8/2007	Initial release
5/8/2007	The container for the counter can now be either an existing page element (container: "#myContainer"), or an arbitrary element type that will be inserted in the DOM after the textarea (container: "<em>"). If nothing is specified, a <span> element will be inserted in the DOM following the textarea.
5/8/2007	Added "keypress" event binding to handle auto-repeat in Safari. See http://www.unixpapa.com/js/key.html for key event browser differences. Added clearTimeout method to pulse function to reduce "runaway pulsing" when a key is held down.
5/9/2007	Minor code revisions. No functional changes.
5/10/2007	Bug fixes. The last version was completely broken in IE7. Sorry!
5/10/2007	Added "onblur" event handler. This somewhat alleviates the problem of a user pasting content into the textarea via the context menu, although the character counter won't be updated until the textarea loses focus.
5/10/2007	Added "onpaste" event handler for IE and "oninput" event handler for Mozilla. This should cover most instances of a user pasting code into the textarea. Added "onfocus", "onmouseover", and "onmouseout" which seems to cover drag-n-drop interactions in IE and FF pretty well. Safari doesn't play nice with drag-n-drop (need to manually give the textarea focus after drag-n-drop to make the counter update -- dragging into the textarea doesn't focus it, and the mouseover/out events aren't fired unless the textarea is focused). Removed the "onblur" handler as I don't think it was adding anything at this point.
2/26/2008	One bug fix: changed the default container HTML from "<span>" to "<span></span>" to address an issue with the container not rendering in IE with jQuery 1.2 and newer (should have been doing it this way all along!). Per a suggestion I received from Jim Spath, added a new configuration option, delay, that allows you to delay the counter update for a specified number of milliseconds (see the second example below). According to Jim: "I've found that rewriting the container's html every time with container.html() can be slow on a complex page with alot going on. What ends up happening is that when a user is typing in the textarea, the letters on the screen fall behind and need to catch up. This appears to be because every event triggered wants to rewrite the span's html, and for each time the user enters a letter, there are multiple events triggered." Thanks, Jim!
2/5/2010	Namespaced my event handlers, so they can be unbound safely. Now it's possible to call $("#myTextArea").charCounter() multiple times on the same element if necessary.

Date

Notes

5/8/2007

Initial release

5/8/2007

The container for the counter can now be either an existing page element (container: "#myContainer"), or an arbitrary element type that will be inserted in the DOM after the textarea (container: ""). If nothing is specified, a element will be inserted in the DOM following the textarea.

5/8/2007

Added "keypress" event binding to handle auto-repeat in Safari. See http://www.unixpapa.com/js/key.html for key event browser differences. Added clearTimeout method to pulse function to reduce "runaway pulsing" when a key is held down.

5/9/2007

Minor code revisions. No functional changes.

5/10/2007

Bug fixes. The last version was completely broken in IE7. Sorry!

5/10/2007

Added "onblur" event handler. This somewhat alleviates the problem of a user pasting content into the textarea via the context menu, although the character counter won't be updated until the textarea loses focus.

5/10/2007

Added "onpaste" event handler for IE and "oninput" event handler for Mozilla. This should cover most instances of a user pasting code into the textarea. Added "onfocus", "onmouseover", and "onmouseout" which seems to cover drag-n-drop interactions in IE and FF pretty well. Safari doesn't play nice with drag-n-drop (need to manually give the textarea focus after drag-n-drop to make the counter update -- dragging into the textarea doesn't focus it, and the mouseover/out events aren't fired unless the textarea is focused). Removed the "onblur" handler as I don't think it was adding anything at this point.

2/26/2008

One bug fix: changed the default container HTML from "" to "" to address an issue with the container not rendering in IE with jQuery 1.2 and newer (should have been doing it this way all along!).

Per a suggestion I received from Jim Spath, added a new configuration option, delay, that allows you to delay the counter update for a specified number of milliseconds (see the second example below). According to Jim:

"I've found that rewriting the container's html every time with container.html() can be slow on a complex page with alot going on. What ends up happening is that when a user is typing in the textarea, the letters on the screen fall behind and need to catch up. This appears to be because every event triggered wants to rewrite the span's html, and for each time the user enters a letter, there are multiple events triggered."

Thanks, Jim!

2/5/2010

Namespaced my event handlers, so they can be unbound safely. Now it's possible to call $("#myTextArea").charCounter() multiple times on the same element if necessary.

Examples

// attaching to multiple textareas,
// using the default options, except for max

$("#myTextArea, #myTextArea2").charCounter(1000);

// overriding the default options,
// specifying the element type and class for the counter,
// custom text for the counter message, disabling
// the pulse effect, and specifying a delay for the
// counter update

$("#myTextArea3").charCounter(20, {
	container: "<em></em>",
	classname: "counter",
	format: "%1 characters to go!",
	pulse: false,
	delay: 100
});

// using the default options

$("#myTextArea4").charCounter();

// using an existing page element to hold the counter

$("#myTextArea5").charCounter(50, {
	container: "#counter5"
});

jquery.charcounter.js

Change Log

Examples

Download