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