JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

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

JavaScript

var supportOnInput = 'oninput' in document.createElement('input');

$("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(supportOnInput ? 'input' : 'keyup', function() {
        var cc = $this.val().length;
        
        el.text(maxLength - cc);
        
        if(maxLength < cc) {
            el.css('color', 'red');
        } else {
            el.css('color', null);
        }
    });
});