JSFiddle - React, Tailwind, and code Playground

by adamh

HTML

<textarea class="project"></textarea>
<span class="chars"></span>

JavaScript

jQuery ( function ( $ ) {   

    var textarea = $('.project');
    var $counter = $('.chars');

    var limit = 200;
    var initial = 0;

    $(textarea).on('keypress keyup copy paste', function(){
        displayLength();
    });


    function displayLength() {
         var thisChars = textarea.val().replace(/(\r\n|\n|\r)/g, '').length; 
        if (thisChars > limit) {
            $counter.text(thisChars + ' of 200 chars');
            var CharsToDel = (thisChars-limit); 
            textarea.val(textarea.val().substr(0,textarea.val().length-CharsToDel));

        } else {
            $counter.text(initial + thisChars + ' of 200 chars');

        }
    }

    displayLength();

    });