JSFiddle - React, Tailwind, and code Playground

by minitech

HTML

<div>
    <textarea class="word_count" maxlength="140"></textarea>
    <p class="counter"></p>
</div>

JavaScript

$(document).ready(function() {
    $('.word_count').each(function() {
        var $this = $(this);
        var counter = $this.parent().find('.counter');
        var maxlength = $this.attr('maxlength');

        counter.text('Only ' + maxlength + ' characters allowed');

        $this.bind('input keyup keydown', function() {
            var value = $this.val();

            if(value.length > 0) {
                counter.text((maxlength - $this.val().length) + ' characters left');
            } else {
                counter.text('Only ' + maxlength + ' characters allowed');
            }
        });
    });
});