JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<span class="counter"></span><br />
<input type="text" name="field1" id="field1" class="word_count" maxLength="100" /><br />
<input type="text" name="field2" id="field2" class="word_count" maxLength="150" />

JavaScript

$(document).ready(function() {
    var counter = $('.counter');
    
    $('.word_count')
        .on('input keyup keydown focus', function () {
            var $this = $(this);
            var maxlength = $this.attr('maxlength');
            var value = $this.val();
    
            if(value.length > 0) {
                counter.text((maxlength - $this.val().length) + ' characters left');
            } else {
                counter.text('Only ' + maxlength + ' characters allowed');
            }   
        });
});