JSFiddle - React, Tailwind, and code Playground

by moojjoo

HTML

<div id="charactersRemaining" style="font-style:italic; font-size: xx-small">5000 characters remaining.</div>
<textarea ID="tbxIntervention" ClientIDMode="static" Width="100%" Rows="4" Height="75px" MaxLength="5000"></textarea>

JavaScript

$(document).ready(function () {
            var maxLength = 5000;
            $('#tbxIntervention').keypress(function (e) {
                var charLength = $(this).val().length - 1;
                var textLength = charLength.toString();
                //var newLines = charLength.match(/(\r\n|\n|\r)/g);
                
                if (this.value.length == maxLength) {
                    e.preventDefault();
                } else if (this.value.length > maxLength) {
                    // Maximum exceeded
                    this.value = this.value.substring(0, maxLength);
                }

                $('#charactersRemaining').val(textLength.substring((charLength), 5000));
                //if (newLines != null) {
                    $('#charactersRemaining').text(5000 - charLength + ' characters remaining.');
                //}
            });
        });