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", });
© 2021 DesignReset
Coded with
Alan Green
Lead Developer
Todo
Launch New Seo Wordpress Theme has been moved to Completed Board by Alma Clark
New Task is added by Ernest Reeves
Dinner with Kelly Young has been moved to Completed Board by Dale Butler
Event Notifications
New Event has been added on 15 Dec 2020
Collect documents from Kelly at the restaurant tommorrow.
Meeting Event on 12 Nov has been updated to 8 PM
New Event Seminar organised by Design Reset will be held on 25 January
Today's Conference is Cancelled.
Meeting with Project Lead on 01 Jan has been updated to 15 Jan