jQuery Character Counter and Limit Plugin For Bootstrap - Bootstrap Maxlength

jQuery Character Counter and Limit Plugin For Bootstrap - Bootstrap Maxlength
File Size: 26 KB
Views Total: 15189
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="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.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.