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, or disable or enable the field to receive input.

Default max length:

  Remove Disable

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

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

$('#disableLength').toggle(function() {
		$(this).text('Enable');
		$('#defaultLength').maxlength('disable');
	},
	function() {
		$(this).text('Disable');
		$('#defaultLength').maxlength('enable');
	});

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

Feedback only when active:

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

Feedback in another element:  

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

Events

You can be notified when the textarea has filled via the onFull setting.

When full:

$('#whenFullLength').maxlength({truncate: false,
	onFull: function(overflow) {
		if (!overflow) { // Notify via an alert
			alert('The field is full');
		}
		else { // Flash styling
			var self = $(this);
			self.removeClass('maxlength-overflow');
			setTimeout(function() {
					self.addClass('maxlength-overflow');
				}, 250);
		}
	}});

Styling

You can adjust the appearance of the textarea and feedback via CSS. The default is to place the feedback immediately after the textarea with a slightly reduced font size.

The textarea is marked with the hasMaxLength class once initialised and any feedback element is marked with the maxlength-feedback class.

Both the textarea and its feedback are marked with the maxlength-full class when the textarea is full, and also with the maxlength-overflow class when even more text is entered.

Default style:

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

Style used here:

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

.maxlength-feedback { display: inline-block;
	width: 7em; margin: 0em 1em; vertical-align: top; }

Feedback below:

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

#belowLength + .maxlength-feedback { display: block;
	width: auto; margin-left: 20em; }

Overlaid feedback:

$('#overlaidLength').maxlength({feedbackText: '{c}/{m}'});

#overlaidLength { padding-top: 0.5em; }
#overlaidLength + .maxlength-feedback { position: relative;
	left: -5.25em; top: 1px; width: 4em; padding-right: 0.25em;
	color: #fff; background-color: #3c8243; text-align: right; }

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
	onFull: null // Callback when full or overflowing,
		// receives one parameter: true if overflowing, false if not
});

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

$(selector).maxlength('option', settings) // Change the instance settings
$(selector).maxlength('option', name, value) // Change an instance setting
$(selector).maxlength('option', name) // Retrieve an instance setting

$(selector).maxlength('enable') // Enable the max length functionality
$(selector).maxlength('disable') // Disable the max length functionality

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