https://www.shingle.com/scripts/WaUtilities/InputCounter.js

1if (window.jQuery) {
2    $.fn.addCounter = function (addCountToElement, options) {
3        new Counter($(this), addCountToElement, options);
4        return this;
5    };
6}
7
8
9var Counter = function (elementToCount, addCountToElement, options) {
10    var elToCount = elementToCount,
11        addEl = addCountToElement,
12        settings = $.extend({
13            successLower: 24,
14            successUpper: 56,
15            dangerMin: 0,
16            dangerMax: 65,
17            successClass: 'text-success',
18            warningClass: 'text-warning',
19            dangerClass: 'text-danger',
20            outerCountHtml: '<span class="outer-count-text"> chars</span>',
21            innerCountHtml: '<span id="title_char_count" class="inner-count-text text"></span>',
22        }, options);
23    if (!addEl) {
24        var nextElement = elementToCount.siblings('label')[0];
25        if (!nextElement) {
26            nextElement = elementToCount.closest('label')[0];
27        }
28        if (nextElement) {
29            addEl = $(nextElement);
30        }
31    }
32
33    initCounter();
34
35
36    function initCounter() {
37        var $outerCountElement = $(settings.outerCountHtml)
38        var $innerCountElement = $(settings.innerCountHtml)
39        var elementCount = getElementValueLength(elToCount);
40        $innerCountElement.text(elementCount);
41        $outerCountElement.prepend($innerCountElement);
42        if (addEl.children()[0]) {
43            $(addEl.children()[0]).prepend($outerCountElement);
44        } else {
45            addEl.append($outerCountElement);
46        }
47        setCountClass($innerCountElement, getElementValueLength(elToCount));
48        elToCount.on('keyup', function (e, element) {
49            $innerCountElement.text(getElementValueLength(elToCount));
50            setCountClass($innerCountElement, getElementValueLength(elToCount));
51        });
52    };
53    function getElementValueLength(el) {
54        return el.val().replace(/{.*}/g, '').length;
55    };
56
57    function setCountClass(el, count) {
58        el = $(el).parent();
59        if (count > settings.successLower && count < settings.successUpper) {
60            setClass(el, settings.successClass);
61        } else if (count < settings.dangerMin || count > settings.dangerMax) {
62            setClass(el, settings.dangerClass);
63        } else {
64            setClass(el, settings.warningClass);
65        }
66    };
67    function setClass(el, elClass) {
68        el.removeClass(settings.successClass);
69        el.removeClass(settings.warningClass);
70        el.removeClass(settings.dangerClass);
71        el.addClass(elClass);
72    };
73}