NOTE: As of July 12, 2009, this blog has been discontinued and replaced by the new Thought Delimited blog. All of the entries in this blog can be found there, along with new posts.
My first jQuery plugin: textCounting
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://www.swartzfager.org/blog/jQuery/plugins/textCounting
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.
http://remysharp.com/2008/06/30/maxlength-plugin/
Before I started this plugin, I looked through the plugin catalog on the jQuery site (http://plugins.jquery.com/) and didn't see anything there that made me think "Well, it's already been done before."
I'll have to take a look at Remy's, but I think there are a few differences that distinguish one plugin from the other. But obviously we both thought "maxlength" was a good name for an attribute/element to hold the limit.
I can't help but feel stupid about it, though.
When it comes to jquery plug-ins, if I can't find something that that URL you listed, I then go to google and do a broader search. I just happened to be browsing Remy's site yesterday since the docs.jquery.com was down and wanted to know who Remy is and what he had done and why everyone was pointing to his API Library.
At any rate, who knows, maybe between his version and yours, you'll have a zen moment and think of something even better.
It's not like I feel I wasted my time or anything: I agree with you that the experience itself was valuable. But I might have decided to try to do something different had I known about Remy's plugin.
Now that I've looked at Remy's code, there are definitely a number of differences. The inspiration for my plugin was a code snippet I developed that let me use a single keyup event handler to count the characters in all of the textareas on a page. Remy's plugin (while coded more elegantly) is geared more towards dealing with a single textarea within a form.