jQuery Ensure Max Length

A simple, easy to use and customizable jquery plugin to limit chatacters inside inputs or textareas fields

Default Options

{ 
	limit: 100,	// max chars allowed
	cssClass: '', // css classes to apply on counter
	separator: '/', // separator of actual and max chars
	placement: null // jQuery selector of where to append counter Ex: '.counter'
}

Basic Usage:

The basic usage of jQuery Ensure Max Length is discribed bellow.

<script src="path_to_jquery/jquery.min.js"></script>
<script src="path_to_plugin/jquery-ensure-max-length.js"></script>
<script type="text/javascript">
(function ( $ ) {
	$( '#example1-title' ).EnsureMaxLength();
} ( jQuery ));
</script>

Changing default max chars

This plugin even works with textareas!
The folowing sample illustrates how to change the default max chars from 100 to 250

<script src="path_to_jquery/jquery.min.js"></script>
<script src="path_to_plugin/jquery-ensure-max-length.js"></script>
<script type="text/javascript">
(function ( $ ) {
	$( '#sample2' ).EnsureMaxLength({
		limit: 250
	});
} ( jQuery ));
</script>

Adding some css classes

jQuery Ensure Max Length allow you to add css class to customize counter.

The classes must be inserted as string separate by a space. class1 class2 class3 ... class3

In this sample we are adding d-block text-right help-block to counter element.

<script src="path_to_jquery/jquery.min.js"></script>
<script src="path_to_plugin/jquery-ensure-max-length.js"></script>
<script type="text/javascript">
(function ( $ ) {
	$( '#sample3' ).EnsureMaxLength({
		cssClass: 'class1 class2 class3'
	});
} ( jQuery ));
</script>

Changing separator

You can also changing the separator "/" to wherever symbol or word you want. In this sample a are changing the "/" to " of ".

<script src="path_to_jquery/jquery.min.js"></script>
<script src="path_to_plugin/jquery-ensure-max-length.js"></script>
<script type="text/javascript">
(function ( $ ) {
	$( '#sample4' ).EnsureMaxLength({
		separator: ' of '
	});
} ( jQuery ));
</script>

Specifying where to append the counter element

The use of 'placement' is optional and if you want to use it, you must pass a valid jquery selector to explicit tell to plugin where to append the counter element

Note: If you don't specify a placement this plugin will append the counter element right after the field

<script src="path_to_jquery/jquery.min.js"></script>
<script src="path_to_plugin/jquery-ensure-max-length.js"></script>
<script type="text/javascript">
(function ( $ ) {
	$( '#sample5' ).EnsureMaxLength({
		placement: '#counter-container'
	});
} ( jQuery ));
</script>