Simple Flexible Character Counter Plugin For jQuery

File Size: 9.01 KB
Views Total: 2374
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Flexible Character Counter Plugin For jQuery

A simple yet flexible, customizable jQuery character counter and character limit plugin that works with input fields, textareas and contenteditable elements.

More features:

  • Easy to implement.
  • Custom min/max length.
  • Prevents writing more than maxlength.
  • Custom counter styles.
  • Custom counter position.
  • Triggers a callback function when you reach the maxlength.
  • Easy to config via data attributes.

More features:

1. Insert the minified version of the jquery.character-counter.js plugin after jQuery library (slim build).

<script src="" 
<script src="jquery.character-counter.min.js"></script>

2. Add the data-charcount-enable="true" attribute to your input, textarea and contenteditable elements and done.

<textarea id="textarea" data-charcount-enable="true"></textarea>
<input type="text" id="input" data-charcount-enable="true">
<div id="editableElementData" contenteditable="true" data-charcount-enable="true">This is content inside a div element</div>

3. You can also initialize the plugin as these:


4. To config the character counter, pass the following options as an object to the characterCounter() function.


  // minLength
  minlength: 0,

  // maxLength
  maxlength: 160,

  // blocks characters that go over the maxlength value
  blockextra: false,

  // or 'top'
  // or a specific element
  position: 'bottom',

  // CSS class of the counter
  counterclass: 'character-counter-indicator',

  // CSS class when out of range
  alertclass: 'out-of-range',

  // custom counter format
  // possible values: '[used]', '[under]', '[over]', '[left]', '[min]', '[max]'
  textformat: '[used]/[max]',

  // callback functions
  onOutOfRange: function(count, min, max){},
  onBackToRange: function (count, min, max){}


5. Or with the data-OPTION attributes:

<textarea id="textarea"

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