jQuery Max Length

Default Settings

The max length functionality can easily be added to a textarea with appropriate default settings.
You can also remove the max length functionality if it is no longer required.

Default max length:    Remove

$('#defaultLength').maxlength();

$('#removeLength').toggle(function() {
		$(this).text('Re-attach');
		$('#defaultLength').maxlength('destroy');
	},
	function() {
		$(this).text('Remove');
		$('#defaultLength').maxlength();
	}
);

You can override the defaults globally as shown below:

$.maxlength.setDefaults({showFeedback: true});

Processed fields are marked with a class of hasMaxLength and are not re-processed if targetted a second time.

Options

Customise the max length functionality through additional settings.

Different length:

$('#otherLength').maxlength({max: 300});

No feedback shown:

$('#noShowLength').maxlength({showFeedback: false});

Custom feedback:

$('#feedbackLength').maxlength({feedbackText: 'Used {c} of {m}'});

#feedbackLength + .maxlength-feedback { clear: both; margin-left: 20em; }

In the Wild

This tab highlights examples of this plugin in use "in the wild".

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).maxlength({
	length: 200, // Maximum length
	showFeedback: true, // True to show user feedback
	feedbackText: '{r} characters remaining ({m} maximum)'
		// Display text for feedback message, use {r} for remaining characters,
		// {c} for characters entered, {m} for maximum
});

$.maxlength.setDefaults(settings) // Change settings for all instances

$(selector).maxlength('change', settings) // Change the instance settings

$(selector).maxlength('destroy') // Remove the max length functionality