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