Examples

Initialize with options

Call the limit via javascript

1 2
<input class="limit" type="text" maxlength="20">
<div id="counter1"></div>
1 2 3 4 5 6 7
$('.limit').limit({
maxLength: 20,
counter: '#counter1',
removeMaxLengthAttr: true,
threshold: 10,
color: 'red'
});

Options

Name Type Default Description
maxLength number 140 The max number of characters that is allowed. Default value will be overriden with the element's maxlength attribute, and both will be overriden with the given option
counter jquery selector blank The jquery selector of the element which shows the counter. Default is blank which means no counter is displayed
removeMaxLengthAttr boolean false Whether or not removing the maxlength attribute of the input/textarea
threshold number 10 The number of characters left before counter's color get changed
color css color 'red' The color to which counter will be changed after number of remaining characters less than threshold

Initialize with markups

Add data attributes to register an element with limit functionality

1 2
<input class="input" type="text" maxlength="20" data-remove-max-length-attr="true" data-provide="bootstrap-limit" data-counter="#counter2" data-threshold="10" data-color="blue">
<div id="counter2"></div>