Character count remaining on textarea in bootstrap

Hi ! Today i am going to explain how to limit the character count in the text area and showing the remaining characters using JQuery and Bootstrap.

This functionality is need when a user allows to enter the bio data, commenting on a particular post and entering a description about the product or any thing in this way we need to allow the specific number of character only.
HTML code

 <div class="form-group">  
  <label for="comment">Comment:</label>  
  <textarea class="form-control" id="comment" rows="5" maxlength="150"></textarea>  
 </div>

JavaScript code

<script type="text/javascript">  
   $(document).ready(function() {  
   var text_max = 150;  
   $('#textarea_count').html(text_max + ' characters remaining');  
   $('#comment').keyup(function() {  
     var text_length = $('#comment').val().length;  
     var text_remaining = text_max - text_length;  
     $('#textarea_count').html(text_remaining + ' characters remaining');  
        });  
      });  
</script>

If you want to increase or decrease the characters.
Follow these steps to modify.
Step #1 : In textarea field change the maxlength 150 to your own
Step #2 : In javascript change the text_max variable value 150 to your own

Download Demo

* If you like this post please don’t forget to subscribe Techies Badi - programming blog for more useful stuff

Character count remaining on textarea in bootstrap

Share this