Default usage
Use maxlength();to enable maxlength.
$('selector').maxlength();
Change the threshold value
Use thresholdoption to show up when there are 20 chars or less
$('input.threshold').maxlength({ threshold: 20,});
Few options
Use warningClassoption to change default badge color and limitReachedClassoption to change the badge after limit reached.
$('input.few-options').maxlength({ warningClass: "badge badge-success", limitReachedClass: "badge badge-warning"});
All the options
Use preTextoption to prepend text, postTextoption to postpend text and separatoroption 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-leftto align badge at the top left corner.
$(selector).maxlength({ placement:"top-left"});
Top
Use placement: topto align badge at the top.
$(selector).maxlength({ placement:"top"});
Top Right
Use placement: top-rightto align badge at the top right corner.
$(selector).maxlength({ placement:"top-right"});
Vertically Center Left
Use placement: leftto align badge at the left corner.
$(selector).maxlength({ placement:"left"});
Vertically Center Right
Use placement: rightto align badge at the right corner.
$(selector).maxlength({ placement:"right"});
Bottom Left
Use placement: bottom-leftto align badge at the bottom left corner.
$(selector).maxlength({ placement:"bottom-left"});
Bottom Right
Use placement: bottom-rightto align badge at the bottom right corner.
$(selector').maxlength({ placement:"bottom-right",});
Bottom
Use placement: bottomto align badge at the bottom corner.
$(selector).maxlength({ placement:"bottom",});
Copyright © 2020 DesignReset, All rights Reserved .
Coded with