Bootstrap MaxLength - Demo

Default usage

The badge will appear when the remaining chars are 10 or less:

$('input[maxlength]').maxlength();

Change the threshold value

The plugin will show the indicator for remaining chars since the number of chars left are 20.

$('input.className').maxlength({
    threshold: 20
});

Few options

$('input.className').maxlength({
            alwaysShow: true,
            threshold: 10,
            warningClass: "label label-success",
            limitReachedClass: "label label-important"
        });

All the options

This is a complete example where all the options configured for the bootstrap-maxlength counter are setted.

Please note: if the alwaysShow option is enabled, the threshold option is ignored.

$('input.className').maxlength({
	alwaysShow: true,
	threshold: 10,
	warningClass: "label label-success",
	limitReachedClass: "label label-important",
	separator: ' of ',
	preText: 'You have ',
	postText: ' chars remaining.',
	validate: true
});

What about textareas?

Bootstrap maxlength supports textarea as well as inputs. Even on old IE.

$('textarea#textarea').maxlength({
    alwaysShow: true
});

Let's play with the position

The field counter can be positioned at the top, bottom, left or right. You can also place the maxlength indicator on the corners: bottom-right, top-right, top-left, bottom-left and centered-right.
All you need to do is specify the placement option, with one of those strings. If none is specified, the positioning will be defauted to 'bottom'.

$('input#placement').maxlength({
    alwaysShow: true,
    placement: 'top-right'
});