Limit text in Textarea box including text counter

In this tutorial, I'll show you how to Limit text in Textarea box including text counter using Jquery.

Click Here for DEMO

First thing, we need HTML to create the textarea box and counter number in separate span. Here is the code:

HTML
<h2>Limit text in Textarea box including text counter</h2>
<form action="#" class="form">
   <fieldset>
      <div class="row">
         <textarea id="textarea" maxlength="100"></textarea>
         <div><span class="rchars">100</span> characters remaining.</div>
      </div>
   </fieldset>
</form>

Then, we need CSS to style up the things. Here I use SCSS so I'll share you SCSS code.
SCSS
.form{
   textarea{
      width: 100%;
      max-width: 500px ;
      height: 100px;
      min-height: 100px;
   }
}

Finally, we need Jquery Code to make the text counter work. So, here's the Jquery below.
Jquery
$(function(){
 var maxLength = 100;
 $('textarea').keyup(function(){
  var elementCount = maxLength - $(this).val().length;
  $('.rchars').text(elementCount);
 });
});

I hope this is working well. If you have any thought or any new sharing, feel free to comment below.

Cheers!!

Share this

Related Posts