jQuery Character Counter and Limit Plugin For Bootstrap - Bootstrap Maxlength

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:

• jQuery Character Counter and Limit Plugin - wChar
• Simple Char Counter For Inputs and Textareas
• Char Counter and Limiter Plugin - Charlimiter
• Twitter-Like Text Area Character Counter

How to use it:

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

<script src="jquery.min.js"></script>
<script src="bootstrap-maxlength.js"></script>

2. Include Bootstrap library and CSS file on the page

<link rel="stylesheet" href="/bootstrap.min.css" />
<script src="bootstrap.min.js"></script>

3. Specify the maximum number of characters allowed in your text field.

<input type="text" maxlength="30" id="example" />

4. Call the plugin on the text field and done.

$('input#example').maxlength({
  // options here
});

5. All the options to customize the plugin.

• showOnReady: True to always show when indicator is ready
• alwaysShow: If true the indicator it's always shown.
• threshold: Represents how many chars left are needed to show up the counter
• warningClass: Warning class(es).
• limitReachedClass: Class(es) when reaching the limit
• separator: Custom separator
• preText: Pre text
• postText: Post text
• message: An alternative way to provide the message text
• showMaxLength:: Show max length
• placement:: Placement: bottom, left, top, right, bottom-right, top-right, top-left, bottom-left and centered-right, bottom-right-inside (default option, as in Google's Material Design), top-right-inside, top-left-inside and bottom-left-inside
• showCharsTyped: show the number of characters typed and not the number of characters remaining
• validate: if the browser doesn't support the maxlength attribute, attempt to type more than the indicated chars, will be prevented.
• utf8: counts using bytesize rather than length. eg: '£' is counted as 2 characters.
• appendToParent: append the indicator to the input field's parent instead of body
• twoCharLinebreak: count linebreak as 2 characters to match IE/Chrome textarea validation. As well as DB storage.
• customMaxAttribute: null = use maxlength attribute and browser functionality, string = use specified attribute instead.
• allowOverMax: 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
• zIndex: CSS z-index property

$('input#example').maxlength({
  showOnReady: false,
  alwaysShow: true,
  threshold: 0,
  warningClass: "small form-text text-muted",
  limitReachedClass: "small form-text text-danger",
  separator: " / ",
  preText: "",
  postText: "",
  showMaxLength: true,
  placement: "bottom-right-inside",
  message: null,
  showCharsTyped: true,
  validate: false,
  utf8: false,
  appendToParent: false,
  twoCharLinebreak: true,
  customMaxAttribute: null,
  allowOverMax: false,
  zIndex: 1099
});

Changelog:

v1.10.0 (2021-04-28)

• New version

v1.9.0 (2020-03-03)

• Add zIndex support
• Fixed file input counter
• Update dependencies

2019-12-01

• v1.8.0

2017-10-20

• Removed unnecessary check on array.

2016-09-08

• 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.