Default usage

Use maxlength(); to enable maxlength.

$('selector').maxlength();

Change the threshold value

Use threshold option to show up when there are 20 chars or less

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

Few options

Use warningClass option to change default badge color and limitReachedClass option to change the badge after limit reached.

$('input.few-options').maxlength({
warningClass: "badge badge-success",
limitReachedClass: "badge badge-warning"
});

All the options

Use preText option to prepend text, postText option to postpend text and separator option to add a seperator in between max and min length .

$('input.alloptions').maxlength({
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.'
});

What about textareas?

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

Positions

Top Left

Use placement: top-left to align badge at the top left corner.

$(selector).maxlength({
placement:"top-left"
});

Top

Use placement: top to align badge at the top.

$(selector).maxlength({
placement:"top"
});

Top Right

Use placement: top-right to align badge at the top right corner.

$(selector).maxlength({
placement:"top-right"
});

Vertically Center Left

Use placement: left to align badge at the left corner.

$(selector).maxlength({
placement:"left"
});

Vertically Center Right

Use placement: right to align badge at the right corner.

$(selector).maxlength({
placement:"right"
});

Bottom Left

Use placement: bottom-left to align badge at the bottom left corner.


$(selector).maxlength({
placement:"bottom-left"
});

Bottom Right

Use placement: bottom-right to align badge at the bottom right corner.

$(selector').maxlength({
placement:"bottom-right",
});

Bottom

Use placement: bottom to align badge at the bottom corner.

$(selector).maxlength({
placement:"bottom",
});