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
JavaScript code
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
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
1 2 3 4 | <div class="form-group"> <label for="comment">Comment:</label> <textarea class="form-control" id="comment" rows="5" maxlength="150"></textarea> </div> |
1 2 3 4 5 6 7 8 9 10 11 | <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> |
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
