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="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<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:

$('#textarea').characterCounter();
$('#input').characterCounter();
$('#editableElement').characterCounter();

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

$('#textarea').characterCounter({

  // 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"
  data-charcounter-enable="true"
  data-charcounter-minlength="0"
  data-charcounter-maxlength="160"
  data-charcounter-blockextra="false"
  data-charcounter-position="bottom"
  data-charcounter-counterclass="character-counter-indicator"
  data-charcounter-alertclass="out-of-range"
  data-charcounter-textformat="[used]/[max]">
</textarea>

---

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