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