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