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.
    1
    2
    <script type="text/javascript" src="/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="/jquery.maxchar.js"></script>
  2. In your HTML head section, initialize the plugin in your jQuery ready block.
    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
    $(document).ready(function(){
         // Pass HTML element id and character limit.
         $('#message').maxChar(50);
    });
    </script>
  3. In your HTML, just make sure your input or textarea element has the id you passed to maxChar above.
    1
    2
    3
    <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.”

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.

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

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

1
2
<span id="custom_element"></span>
<textarea id="message"></textarea>

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

1
2
3
4
5
6
7
<script type="text/javascript">
$(document).ready(function(){
     // Pass HTML element id and character limit.
     $('#name').maxChar(10, {indicator:'nameIndicator'});
     $('#message').maxChar(50, {indicator:'messageIndicator'});
});
</script>

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

1
2
<input id="name" /><span id="nameIndicator"></span>
<textarea id="message"></textarea><span id="messageIndicator"></span>

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

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

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.

1
2
3
4
5
6
<script type="text/javascript">
$(document).ready(function(){
     // The default space is one space character ' '. Use the spaceBeforeMessage option to change it.
     $('#message').maxChar(50, {spaceBeforeMessage:''});
});
</script>

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.

1
2
3
4
5
6
<script type="text/javascript">
$(document).ready(function(){
     // The default rate is 200 milliseconds. Use the rate option to set it whatever you wish.
     $('#message').maxChar(50, {rate:500});
});
</script>
Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay