Count Characters In Text Fields - jQuery charcounter.js

A tiny yet highly customizable character counter plugin used to count and truncate characters in <input /> and <texarea /> elements.

Main Features:

• Easy to implement via HTML data attributes.
• Apply a warning class to the counter when you about to reach the limit.
• Automatically truncates characters when reaching the limit.
• Multiple language support.
• 5 built-in character count & countdown modes.

How to use it:

1. To get started, insert the charcounter.js plugin's files into the HTML page which has jQuery library loaded.

<link rel="stylesheet" href="/path/to/dist/css/charcounter.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/charcounter.js"></script>

2. Apply the function CharCounter to the target input or textarea element and determine the maximum number of characters allowed to insert as follows:

<input id="demo" />

$(function(){
  $('#example').CharCounter({
    max: 60
  });
});

3. Apply the function CharCounter to the target input or textarea element and determine the maximum number of characters (default: 255) allowed to insert as follows:

<input id="demo" />

$(function(){
  $('#example').CharCounter({
    max: 60
  });
});

4. Or initialize the plugin and config the character counter with HTML data attributes:

<input id="demo"
       data-charcounter='{"max": 60}' 
/>

5. Determine whether to prevent typing when reaching the limit. Default: false.

$('#example').CharCounter({
  truncateAfterMax: false
});

6. Determine the count & countdown mode you'd like to use:

• count: character counter (default)
• countdown: character countdown, e.g. 60 characters remaining
• countOnMax: shows max count, e.g. 8 characters / 60
• countAndTooMuch: display the number of characters exceeding the limit, e.g. 81 characters (21 too many)
• countdownAndTooMuch: display the number of characters exceeding the limit, e.g. 0 character remaining (102 too many)

$('#example').CharCounter({
  method: 'countdown'
});

7. Use the warningRatio option to determine when the plugin adds a warning class to the character counter.

$('#example').CharCounter({
  warningRatio: 0.2
});

8. Determine the events to track.

$('#example').CharCounter({
  events: 'keyup change'
});

9. Customize the tag and CSS class of the character counter.

$('#example').CharCounter({
  containerTag: 'span',
  containerClass: 'charcounter-container'
});

10. Localize the character counter.

$('#example').CharCounter({
  locale: 'fr'
});

$.fn.CharCounter.locales.fr = {
  countdown: function (count, plural) { return count + ' caractère' + (plural ? 's' : '') + ' restant' + (plural ? 's' : ''); },
  count: function (count, plural) { return count + ' caractère' + (plural ? 's' : ''); },
  countOnMax: function (count, plural, max) { return this.count(count, plural) + ' / ' + max; },
  countdownAndTooMuch: function (count, plural, tooMuch) { return this.countdown(count, plural) + (tooMuch > 0 ? ' (' + tooMuch + ' en trop)' : ''); },
  countAndTooMuch: function (count, plural, tooMuch) { return this.count(count, plural) + (tooMuch > 0 ? ' (' + tooMuch + ' en trop)' : ''); }
};

---

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