JSFiddle - React, Tailwind, and code Playground

by paulL

HTML

<textarea id="myInput"></textarea> <br>
Counter: <span id="charCount"></span>

CSS

textarea { width:300px; height:200px; }
.limitTo{ color: rgba(255, 0, 0, 0.5);

JavaScript

var characters_Limit = 20;
$('#myInput').keyup(function() {
    //if ($(this).val().length > characters_Limit) {
      //   $(this).val($(this).val().substr(0, characters_Limit));
    //}
    
    var count = characters_Limit-this.value.replace(/{.*}/g, '').length;
    if(count <= (characters_Limit-10) || count < 0){
        $('#charCount').addClass('limitTo');
    }else{
       $('#charCount').removeClass('limitTo');
    }
     $('#charCount').text(count);
});