Count Characters In Text Fields - jQuery charcounter.js
File Size: | 11.7 KB |
---|---|
Views Total: | 1165 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.