WelCome TO My Blog
Asp.Net MVC 08 December 2017

Create Accessible TextArea Character Counter in Html Using jQuery

By dhiren

Step 1: Add JQuery CDN or Download JQuery library



Step 2: Create html file and put above link in that html.Put code in html.


<div class="form-group">

<label class="control-label col-md-2" for="Resume">Message</label>

<div class="col-md-10">

    <textarea aria-describedby="text-counter-parent" class="form-control valid" cols="50" id="Resume" maxlength="100" name=" Message " rows="5"></textarea>


<div id="text-counter-parent" class="col-md-offset-2 col-md-10"><span id="text-counter">100</span> character(s) left.</div>



JavaScript or JQuery:-

$(function () {

            $('# Message).keyup(function (e) {


                var max = 100;

                var len = $(this).val().length;

                var char = max - len;






In Below image u can see that out 100 char..93 char remaning.

Hope you like it. Stay tuned for more..wink

Leave a Comment

Only registered users can comment.

View Comments