JSFiddle - React, Tailwind, and code Playground

by gopi1410

HTML

<textarea maxlength="10"></textarea>

CSS

body { padding: 20px; }
textarea { width: 50%; height: 100px; }

JavaScript

(function($) {

    $.fn.charCount = function(options) {

        // default configuration properties
        var defaults = {
            allowed: 10,
            warning: 5,
            css: 'counter',
            counterElement: 'span',
            cssWarning: 'warning',
            cssExceeded: 'exceeded',
            counterText: '',
            preventTextEntry: true
        };

        var options = $.extend(defaults, options);

        function calculate(obj, event) {

            var count = $(obj).val().length;
            var available = options.allowed - count;
            if (available <= options.warning && available >= 0) {
                $(obj).next().addClass(options.cssWarning);
            } else {
                $(obj).next().removeClass(options.cssWarning);
            }
            
            if (available < 0) {
                if (options.preventTextEntry && event.which != 46 && event.which != 8) { event.preventDefault() };
                $(obj).next().addClass(options.cssExceeded);                
            } else {
                $(obj).next().removeClass(options.cssExceeded);
            }
            $(obj).next().html(options.counterText + available);
        };

        this.each(function() {
            $(this).after('<' + options.counterElement + ' class="' + options.css + '">' + options.counterText + '</' + options.counterElement + '>');
            calculate(this);
            $(this).keydown(function(e) {
                calculate(this, e)
            });
            $(this).change(function(e) {
                calculate(this, e)
            });
        });

    };

    $('textarea').charCount();

})(jQuery);