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});

Don't truncate text:

$('#truncateLength').maxlength({truncate: false});

No feedback shown:

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

Custom feedback:

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

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

Feedback only when active:

$('#activeLength').maxlength({showFeedback: 'active'});

Feedback in another element:  

 

$('#targetLength').maxlength({showFeedback: true, feedbackTarget: '#targetFeedback'});

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({
	max: 200, // Maximum length
	truncate: true, // True to disallow further input, false to highlight only
	showFeedback: true, // True to always show user feedback, 'active' for hover/focus only
	feedbackTarget: null, // jQuery selector or function for element to fill with feedback
	feedbackText: '{r} characters remaining ({m} maximum)',
		// Display text for feedback message, use {r} for remaining characters,
		// {c} for characters entered, {m} for maximum
	overflowText: '{o} characters too many ({m} maximum)'
		// Display text when past maximum, use substitutions above
		// and {o} for characters past maximum
});

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

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

$(selector).maxlength('settings') // Retrieve the instance settings

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