JSFiddle - React, Tailwind, and code Playground

by liggth

HTML

<!DOCTYPE HTML>
<html>
    <head>
        <style type="text/css">
            .warning {
                color: red;
            }
        </style>
        <meta charset="utf-8" />
        <title></title>
    </head>
 
    <body>
        <textarea id="shot_desc" cols="25" rows="5" maxlength="180"></textarea>
        <span id="textareaCount" class="textareaCount"></span>
    </body>
</html>

JavaScript

$(function() {
        $('#shot_desc').keyup(function() {
            var maxLength = $(this).attr('maxlength');
            var curLength = $(this).val().length;
            $(this).val($(this).val().substr(0, maxLength));
            var remaning = maxLength - curLength;
            if (remaning < 0) remaning = 0;
            $('.textareaCount').html(remaning + ' осталось символов');
        });
    });