Show word or character count on text boxes/areas that have data-max-length="<number>" and data-max-type="(character|word)" attributes.

limit-textarea.js

<script type="text/javascript">
    $(function(){
        function wordCount(str, charlist) {
            var len = str.length, cl = charlist && charlist.length,
                chr = '', tmpStr = '', i = 0, c = '', wC = 0, reg = '', match = false;
            var _preg_quote = function(str) {
                return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!<>\|\:])/g, '\\$1');
            }
            var _getWholeChar = function(str, i) {
                var code = str.charCodeAt(i);
                if (code < 0xD800 || code > 0xDFFF) {
                    return str.charAt(i);
                }
                if (0xD800 <= code && code <= 0xDBFF) {
                    if (str.length <= (i + 1)) {
                        throw 'High surrogate without following low surrogate';
                    }
                    var next = str.charCodeAt(i + 1);
                    if (0xDC00 > next || next > 0xDFFF) {
                        throw 'High surrogate without following low surrogate';
                    }
                    return str.charAt(i) + str.charAt(i + 1);
                }
                if (i === 0) {
                    throw 'Low surrogate without preceding high surrogate';
                }
                var prev = str.charCodeAt(i - 1);
                if (0xD800 > prev || prev > 0xDBFF) {
                    throw 'Low surrogate without preceding high surrogate';
                }
                return false;
            }
            if (cl) {
                reg = '^(' + _preg_quote(_getWholeChar(charlist, 0))
                for (i = 1; i < cl; i++) {
                    if ((chr = _getWholeChar(charlist, i)) === false) {
                        continue;
                    }
                    reg += '|' + _preg_quote(chr);
                }
                reg += ')$';
                reg = new RegExp(reg);
            }
            for (i = 0; i < len; i++) {
                if ((c = _getWholeChar(str, i)) === false) {
                    continue;
                }
                match = (c.search(/^[A-Za-z]+$/g) !== -1)
                    || (reg && c.search(reg) !== -1)
                    || ((i !== 0 && i !== len - 1) && c === '-')
                    || (i !== 0 && c === "'");
                if (match) {
                    tmpStr = tmpStr + c;
                }
                if (i === len - 1 || !match && tmpStr !== '') {
                    tmpStr = '';
                    wC++;
                }
            }
            return wC;
        }
        var debounce = function(func, wait, immediate) {
            var timeout;
            wait = wait || 250;
            return function() {
                var context = this, args = arguments;
                var later = function() {
                    timeout = null;
                    if (!immediate) {
                        func.apply(context, args);
                    }
                };
                var callNow = immediate && !timeout;
                clearTimeout(timeout);
                timeout = setTimeout(later, wait);
                if (callNow) {
                    func.apply(context, args);
                }
            };
        };
  
        $(document).on('keyup', '#theform textarea[data-max-length]', debounce(
            function(event){
                var input = event.target;
                var length = 0;
                if ($(input).data('maxType') == 'character') {
                    length = parseInt($(input).val().length);
                } else {
                    length = wordCount($(input).val());
                }
                var span = $(input).next('i.suffix').find('span');
                span.text(length + ' out of ' + $(input).data('maxLength') + ' used');
                if (length > parseInt($(input).data('maxLength'))) {
                    span.addClass('overload');
                } else {
                    span.removeClass('overload');
                }
            }, 150
        ));
    });
</script>