loader
Loading...
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

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

 

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

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>

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

</div>

 

JavaScript or JQuery:-

$(function () {

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

           

                var max = 100;

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

                var char = max - len;

                $('#text-counter').html(char);

            });

        });

 

OutOut

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