Home

SimpleMaxChars jQuery Plugin

SimpleMaxChars is a lightweight jQuery plugin that displays a message indicating the number of characters remaining on an <input> or <textarea> field. The plugin is simple to use; just select the field(s) to display the message on, then call the plugin with any options you want to use.

Available Options

Option	Type	Description
maxChars	integer	Sets the character limit for the field. Default is the maxlength attribute of the field or “255” if no maxlength attribute is present.
warningLimit	integer	Sets the threshold for adding a warning class to the message container (e.g. add a class that changes the message color to red/orange/etc.). Default is “20.”
messageClass	string	Specifies the class of the outer <span> element that contains the message. Default is “simple-maxchars-message.”
warningClass	string	Specifieds the class of the inner <span> element that contains the message once the warningLimit threshold is reached. Default is “warning.”
lineBreak	boolean	Specifies whether to add a line break <br /> before the message (i.e. so it is displayed below the field instead of beside it). Default is false.
debug	boolean	Specifies whether to run built-in debug function (can be helpful for troubleshooting). Default is false.

Basic Example

Here is the most basic use of the plugin. It will look for the maxLength property of any input text fields to determine how many characters are allowed. If maxLength is not available, it will default to 255 characters:

$( 'input[type="text"]' ).SimpleMaxChars();

Example with options

This example looks for a field with an id of “teaser” and uses a few plugin options, including some custom CSS to alter the font-size and color of the message:

<style type="text/css">
.remaining-characters {
	font-size: .8em;
}
.error {
	color: #ff7700;
}
</style>

$( '#teaser' ).SimpleMaxChars({
	maxChars: 70,
	warningLimit: 15,
	messageClass: "remaining-characters",
	warningClass: "error",
	lineBreak: true,
	debug: true
});

Compatibility

Tested with jQuery 1.6.2+, IE7+, Chrome 17, Firefox 8.