How to make fully responsive Character Counter through jQuery?

Description:- Through this example you can easily made your own character counter through jQuery. Character counter will count your characters which you are typing in the given textarea or any where you want. Hence I made this by using Bootstrap so don’t forget to include three main bootstrap files in your head tag.

<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Character count by Webtechball</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $("#characters").keyup(function(){
        var a = $("#characters").val();
        var b = a.length;
        document.getElementById("count").innerHTML=b;
    });
});
</script>
</head>
<body>
<div class="container">
  <div class="row">
  <div class="col-md-4"></div>
      <div class="col-md-4">
    <form role="form">
        <div class="form-group">
            <label for="Message">Message</label>
            <textarea class="form-control" rows="5" id="characters"></textarea>
            <div id="count"></div>
        </div>
    </form>
    </div>
    <div class="col-md-4"></div>
</div>
</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s