Simple Flexible Character Counter Plugin For jQuery
File Size: | 9.01 KB |
---|---|
Views Total: | 2409 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.