JSFiddle - React, Tailwind, and code Playground

by bhavinrana07

HTML

<body>
<h1>TextArea maxlength with jQuery</h1>
<textarea id="comment" maxlength="10" rows="10" cols="60" ></textarea>
</body>

JavaScript

$(document).ready( function () {
 
	maxLength = $("textarea#comment").attr("maxlength");
        $("textarea#comment").after("<div><span id='remainingLengthTempId'>" 
                  + maxLength + "</span> remaining</div>");
 
        $("textarea#comment").bind("keyup change", function(){checkMaxLength(this.id,  maxLength); } )
 
    });
 
    function checkMaxLength(textareaID, maxLength){
 
        currentLengthInTextarea = $("#"+textareaID).val().length;
        $(remainingLengthTempId).text(parseInt(maxLength) - parseInt(currentLengthInTextarea));
 
		if (currentLengthInTextarea > (maxLength)) { 
 
			// Trim the field current length over the maxlength.
			$("textarea#comment").val($("textarea#comment").val().slice(0, maxLength));
			$(remainingLengthTempId).text(0);
 
		}
    }