Text Counter

jQuery plugin to count words or characters and enforce min/max requirements.

Page Demo Plugin Website

Basic examples

Initiate the plugin with the following javascript function:

if($('.text-counter')[0]) {
    $('.text-counter').each(function () {
        var minLength = $(this).data('min-length') || 0;
        var maxLength = $(this).data('max-length');

        $(this).textcounter({
            min: minLength,
            max: maxLength,
            countDown: true,
            inputErrorClass: 'is-invalid',
            counterErrorClass: 'text-red'
        });
    });
}

Basic text counter with least options enabled

<div class="form-group">
    <textarea class="form-control textarea-autosize text-counter" placeholder="Start typing..."></textarea>
    <i class="form-group__bar"></i>
</div>

Fires when a counter reaches the maximum word/character count.

<div class="form-group">
    <textarea class="form-control textarea-autosize text-counter" data-max-length="100" placeholder="Start typing... (Max set to 100)"></textarea>
    <i class="form-group__bar"></i>
</div>

Fires when a counter reaches the minimum word/character count

<div class="form-group">
    <textarea class="form-control textarea-autosize text-counter" data-min-length="10" placeholder="Start typing... (Min set to 10)"></textarea>
    <i class="form-group__bar"></i>
</div>
Files required:
Type Files
Custom SCSS /src/scss/inc/vendor-overrides/_jquery-text-counter.scss
Javascript /src/js/vendors/jquery-text-counter.js
Library /resources/vendors/jquery-text-counter/textcounter.min.js