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