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

maxChar jQuery plugin

Add a powerful character counter to your Web forms. Highly customizable with many options, maxChar rocks. And it's free. And it's a jQuery plugin. And people love it. Check out the comments on version 0.1.0.

Example character counter

This example uses the optional setting called "label" that displays when the form field is not in focus. When the user starts typing, the label is dynamically replaced with the character count.

Example file missing. You browser does not support iframes. Sorry.

<script type="text/javascript" src="jquery.maxchar.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Pass HTML element id and character limit.
$('#message').maxChar(50, {label: 'Type message'});
});
</script>


Versions

We're on the third release, 0.3.0. See more at this blog post maxChar jQuery Plugin: New Release 0.3.

Download from the maxChar jQuery plugin page.

Bug Fixes

For information about the bugs fixed, see the maxChar bugs page.

Version 0.3.0 Parameters

A jQuery plugin allows configuration via the settings object. maxChar offers several optional settings passed as parameters.

• debug - Specify whether to send message updates to the Firebug console. Default is false.
• indicator - Specify alternate indicator element by id. Default is indicator created dynamically.
• label - Specify a default label displayed when input element is not in focus. Default is blank.
• pluralMessage - Set the plural form of the remaining count message. Default is ' remaining'.
• rate - Set the update rate in milliseconds. Default is 200.
• singularMessage - Set the singular form of the remaining count message. Default is ' remaining'.
• spaceBeforeMessage - Set spacing in front of (to the left of) the indicator message. Default is ' '.
• truncate - Truncate submitted value down to limit on form submit. Default is true.

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.
   
<form>
<textarea id="message"></textarea>
</form>


   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."

Examples

See the parameters list above for all settings. These example show a couple of optional settings but not all of them.

Debug parameter example

Specify whether to send message updates to the Firebug console. Default is false.


<script type="text/javascript">
$(document).ready(function(){
// Pass HTML element id and character limit.
$('#message').maxChar(50, {debug:true});
});
</script>


Indicator parameter example

By default, if you do not specify an indicator, maxChar creates one for you dynamically. If you do specify an indicator, maxChar will use it instead.


<script type="text/javascript">
$(document).ready(function(){
// Pass HTML element id and character limit.
$('#message').maxChar(50, {indicator:'custom_element'});
});
</script>


Then in your HTML , you can create an element to use as custom indicator for displaying update messages


<div id="custom_element"></div>


Multiple parameters

Pass multiple parameters, in this case the singularMessage and pluralMessage parameters


<script type="text/javascript">
$(document).ready(function(){
// Pass HTML element id and character limit.
$('#message').maxChar(50, {singularMessage:' character remaining',pluralMessage:' characters remaining'});
});
</script>