jQuery Character Counter and Limit Plugin For Bootstrap - Bootstrap Maxlength

jQuery Character Counter and Limit Plugin For Bootstrap - Bootstrap Maxlength
File Size: 20.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Bootstrap Maxlength is a beautiful jQuery plugin that displays character counter attached to the input field and limit the maximum length as user input, using Twitter Bootstrap and html5 maxlength attribute.

See also:

How to use it:

1. Include jQuery library and jQuery Bootstrap Maxlength on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap-maxlength.js"></script>

2. Include Bootstrap library and CSS file on the page

<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

3. Markup

<input type="text" maxlength="25" name="alloptions" id="alloptions" />

4. Call the plugin with options

alwaysShow: true,
threshold: 10,
warningClass: "label label-success",
limitReachedClass: "label label-important",
separator: ' of ',
preText: 'You have ',
postText: ' chars remaining.'

5. All the options.

  • showOnReady: false: true to always show when indicator is ready
  • alwaysShow: false: if true the indicator it's always shown.
  • threshold: 10: Represents how many chars left are needed to show up the counter
  • warningClass: 'label label-success'
  • limitReachedClass: 'label label-important label-danger'
  • separator: ' / '
  • preText: ''
  • postText: ''
  • message: null: an alternative way to provide the message text
  • showMaxLength: true
  • placement: 'bottom'
  • showCharsTyped: true: 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: false = use maxlength attribute and browswer functionality. True = removes maxlength attribute and replaces with 'data-bs-mxl'. Form submit validation is handled on your own.  when maxlength has been exceeded 'overmax' class added to element

Change Log:


  • Removed unnecessary check on array.


  • indicator won’t hide on blur when `alwaysShow`

v1.7.0 (2016-04-29)

  • Fixed issues around the alwaysShow option

v1.6.0 (2015-07-24)

  • Added new custom events: maxlength.reposition, maxlength.shown, maxlength.hidden.
  • Added option placement for custom placement handler. 
  • Extended message option. Now it can also be optionally a function.

v1.5.7 (2014-09-07)

  • Fixed issue with bower
  • Added over maxlength functionality with customMaxAttribute
  • Added twoCharLinebreak option
  • Implemented input event rather than keydown to improve usability
  • Fixed jshint, jscs errors
  • When an input with associated maxlength element is removed, maxlength is also removed.
  • Fixed #40, error on resize event.
  • Fixed #44 (pasted text in can cause it to go over the max length)
  • Added self protection of multiple focus events
  • Added back detection of window resizing

v1.5.0 (2013-10-28)

  • Removed window.resize
  • Maxlenght is created and destroyed each time
  • Fixed Doesn't update the limit after input's maxlength attribute was changed ( #31 )
  • Added Gruntfile
  • Added qunit unit tests

v1.4.2 (2013-08-28)

  • Fixed issue with counting when the user moves with shift+tab keyboard shortcut.
  • Replaced the warningClass limitReachedClass options to use labels rather than badges for Bootstrap 3.0 better compatibility.

v1.4.1 (2013-08-17)

  • Added support for TAB key when the maxlength is reached

v1.3.7 (2013-05-11)

  • Optimized calculation of position

This awesome jQuery plugin is developed by mimo84. For more Advanced Usages, please check the demo page or visit the official website.