JSFiddle - React, Tailwind, and code Playground

by gopi1410

HTML

<input type="text" maxlength="160" value="" placeholder="Enter some text." />

JavaScript

$("input[maxlength]").each(function() {
    var $this = $(this);
    var maxLength = parseInt($this.attr('maxlength'));
    $this.attr('maxlength', null);
    
    var el = $("<span class=\"character-count\">" + maxLength + "</span>");
    el.insertAfter($this);
    
    $this.bind('keyup', function() {
        var cc = $this.val().length;
        
        el.text(maxLength - cc);
        
        if(maxLength < cc) {
            el.css('color', 'red');
        } else {
            el.css('color', null);
        }
    });
});