Wednesday, July 30, 2008

My first jQuery plugin: textCounting

I've blogged about things I've done with jQuery before, but this is the first jQuery plugin I've developed.

My textCounting plugin lets you show users how much text they've entered into a <textarea> box and/or how much text they can still enter before reaching a set limit. The plugin can be configured to count either the number of words or number of characters entered or still available.

The plugin is designed in a way that a single call of the plugin can affect all of the <textarea>s on the same page if you follow certain element ID naming conventions. There are a number of different configuration options, and it can be used with another jQuery plugin, the Metadata plugin, to retrieve settings and data from a metadata block within the class attribute of the <textarea>s.

To see a demonstration of the plugin in action and to download the plugin, visit:

http://bcswartz.github.io/textCounting-jQuery-plugin/

I want to point out that one thing that the plugin does NOT do is enforce the word/character limit set for each <textarea>: you can apply a CSS class to the HTML element containing the count as a visual notice to the user that they've exceeded the limit, but it doesn't actually prevent them from continuing to type. I was originally going to provide that option, but I realized that a lot of users tend to paste content from another source in <textarea>s, especially when the content is expected to be verbose, and making the user count the words or characters in their text prior to copying it into the <textarea> defeats the purpose of providing the counter in the first place.

If any of you are interesting in writing your own jQuery plugins, I highly recommend you read Mike Alsup's blog post "A Plugin Development Pattern" on the Learning jQuery site. It was an invaluable resource and taught me a lot.

No comments:

Post a Comment