Are you looking to build a script like twitter to show your users how many characters they have remaining to write? If your answer is yes, then keep a close eye in this tutorial. In this tutorial, I will explain how to count a character in textarea using jQuery. This is a quick tutorial about jQuery.
It is very useful as we need most of the time to create a textarea which will count the entered character by the user in the real web application development.
Download Demo
Please make sure you have included the below jQuery file in your web page where you want to implement the character count functionality for your textarea.
1 | <script src="http://code.jquery.com/jquery-1.5.js"></script> |
Use below code to create textarea characters count in your web applications. Copy paste below jQuery code in your page before head tag closed.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> $(document).ready(function() { var text_max = 250; $('#textarea_feedback').html(text_max + ' characters remaining'); $('#textarea').keyup(function() { var text_length = $('#textarea').val().length; var text_remaining = text_max - text_length; $('#textarea_feedback').html(text_remaining + ' characters remaining'); }); }); </script> |
Use below code in your application where you want to use character counter in textarea.
1 2 3 | <label>Type you text</label> <textarea id="textarea" maxlength="250" onkeyup="countChar(this)" class="form-control" rows="3"></textarea> <div id="textarea_feedback"></div> |
See the live demo of characters count script and then download complete code from below download link.
Download Demo
If you like FreeWebMentor and you would like to contribute, you can write an article and mail your article to [email protected] Your article will appear on the FreeWebMentor main page and help other developers.
Article Tags: character count using jquery, Count character in textarea, javascript tutorials, jquery tutorials for beginners, textarea character count
