Loading...

I'm pleased to introduce Unleashed Technologies' first open-source project, "maxchars"!  maxchars is a jQuery plugin for easily adding and enforcing character limits on input elements with a friendly UI.  It works similar to Twitter, where users are presented with a helpful message stating the number of remaining characters or notifying them if they've exceeded the limit.  Similar plugins already exist, but we wanted to design something far simpler and easy to integrate.

Download & Source Code

The plugin can be downloaded here: Download maxchars v1.0.0.

The source code is also available on GitHub: http://github.com/unleashtech/maxchars

Examples:

Here's a simple example to get started:

$('#someElement').maxchars(250);

The code above would immediately enforce a 250 character limit on #someElement. The UI message would be automatically created and inserted after the element.

You can also pass an object with different settings to tweak it's behavior:

$('#someElement').maxchars({
    maxChars: 140,
    showExtraChars: true,
    messageHolder: $('div.messagebox')
});

Demo

We created a simple HTML page you can use to see how it works: try it here

Documentation

To enable maxchars on an element (or multiple elements), use the following code:

$('#someElement').maxchars(options);

The simplest way to use this is providing the maximum number of characters like so:

$('#someElement').maxchars(250);

 

Option Type Description Default
maxChars number Maximum number of characters to allow. If this is blank, the plugin will attempt to use the "maxlength" attribute. none
showExtraChars boolean If "false", the plugin will automatically delete any extra characters the user has typed. If "true", the user can type past the limit, but will be notified they have too many characters. true
messageHolder element The element in which to display the UI message about remaining characters.  
function You may pass in a function to dynamically create the message holder. You are responsible for creating it and inserting it into the DOM. This function should return the element to be used. built-in function; see source

There are also 3 methods which can be called like so:

$('#someElement').maxchars('methodname');
Method Description Returns
init Initializes the elements. For convenience, this is the default method called if you only pass in the settings object. If you wish to manually call this method, make sure the settings are passed in as the second argument. The current object (for chainability)
destroy Removes the maxchars functionality from the element(s). If the message element was dynamically created by a function, it will also be removed. No additional arguments are needed. The current object (for chainability)
isvalid Tests the selected elements to see if their values exceed the limit. Boolean "true" or "false"