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", });
Copyright © 2021 DesignReset, All rights reserved.
Coded with