BLOG: Mitch Wilson, Austin TX Web & Multimedia Developer – Austin, TX

New jQuery plugin: maxChar

Easily add a max character limit on any HTML input or textarea form field. Also dynamically updates status message countdown to user, eg, "10 remaining" as they type. Has several options. Message is customizable. Correctly handles user events, even paste via right click menu.

Update: version 0.3.0 is out

This post is about the 0.1.0 version. The newest version is now 0.3.0. To see the new version and keep up with future updates, see the main maxChar page.

Features for version 0.1.0 (deprecated, see Update above)

• No JavaScript in HTML tags
• Drop dead simple with sensible defaults or completely customizable with overrides
• Have plural and singular forms of message
• Easily work with multiple target fields, as many as I want
• Properly handle user pasting text via right click menu
• Be able to properly handle updating message

Basic example .. doesn't get any easier than this

The most common use case is to add the maxChar functionality to a textarea, eg, in a comment form. Just load jquery, load the plugin, and initialize it on the target form element while passing the character limit you want to enforce.

Instructions

1. Add links to jQuery and the maxChar plugin in your HTML head section.
   



2. In your HTML head section, initialize the plugin in your jQuery ready block.
   


3. In your HTML, just make sure your input or textarea element has the id you passed to maxChar above.
   
   
   

   NOTE: although below the only element you create is the textarea element, the maxChar plugin dynamically creates and adds a span element after the textarea element. This dynamically created span element is the container for the updated status message, eg, "N remaining."

Advanced Examples: You want options, you got options

I added the options that made sense to me. Check 'em out.

Option: indicator

The indicator is the HTML element that displays the status message, such as "10 remaining." By default, maxChar dynamically creates a span element with an id="indicator", then adds it in the DOM after the target element, in our previous example, after the textarea.

Sometimes, though, you will want to override the default indicator HTML element and specify your own. Just pass the indicator id as a parameter and maxChar will not dynamicaly create and insert a span element; it will instead update your specified HTML element with the status message.

And in your HTML, add the custom element wherever you want it in your design.

Setting up multiple instances

Using the indicator option is usually mandatory when using maxChar with multiple form fields, since you normally want each field will need it's own indicator. (If you do not specify multiple indicators, all targeted fields with share the single indicator; this would be an interesting design but probably a little confusing.)

And in your HTML, specify your HTML input and textarea and the matching span elements for their indicators.

Options: singularMessage and pluralMessage

You can also change the indicator's status message. By default it says "N remaining" but you can change the text after the number (N) to whatever you want. You can also create singular and plural versions, eg, "2 characters remaining" and "1 character remaining."

Option: spaceBeforeMessage

In addition to changing the status message itself, you can also specify the spacing in front of the message. This option is handy if the status message should, or should not, have a space between it and the textarea or input element. The default is one space character. In the following example I remove any space by setting to an empty string.

Option: rate

The interval at which maxChar runs is configurable. The default is 200 milliseconds. Sometimes you might want to tweak this rate for your own reasons. I found myself setting to different values to get the exact rate I felt was user-friendly. Since you might have your own preference, I made it an option.