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",
});
Copyright © 2022 DesignReset, All rights reserved.
Coded with