Maxlength with bootstrap-maxlength and HTML% Maxlength
HTML
<textarea class="maxlengthtest" id="xyz" name="xyz" maxlength="20"></textarea>
CSS
.label-info,
.label-warning {
color: #FF0000;
}
JavaScript
(function ($) {
'use strict';
/**
* We need an event when the elements are destroyed
* because if an input is removed, we have to remove the
* maxlength object associated (if any).
* From:
* http://stackoverflow.com/questions/2200494/jquery-trigger-event-when-an-element-is-removed-from-the-dom
*/
if (!$.event.special.destroyed) {
$.event.special.destroyed = {
remove: function (o) {
if (o.handler) {
o.handler();
}
}
};
}
$.fn.extend({
maxlength: function (options, callback) {
var documentBody = $('body'),
defaults = {
showOnReady: false, // true to always show when indicator is ready
alwaysShow: false, // if true the indicator it's always shown.
threshold: 20, // Represents how many chars left are needed to show up the counter
warningClass: 'label label-success',
limitReachedClass: 'label label-info label-warning',
separator: ' / ',
preText: '',
postText: '',
showMaxLength: true,
placement: 'top',
message: null, // an alternative way to provide the message text
showCharsTyped: false, // show the number of characters typed and not the number of characters remaining
validate: false, // if the browser doesn't support the maxlength attribute, attempt to type more than
// the indicated chars, will be prevented.
utf8: false, // counts using bytesize rather than length. eg: '£' is counted as 2 characters.
appendToParent: false, // append the indicator to the input field's parent instead of body
twoCharLinebreak: true, // count linebreak as 2 characters to match IE/Chrome textarea validation. As well as DB storage.
customMaxAttribute: null, // null = use maxlength attribute and browser functionality, string = use specified attribute instead.
allowOverMax: false
// Form submit...