How to make fully responsive Character Counter through JavaScript ?

Description:- Through this example you can easily made your own character counter through JavaScript. 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 counter by Webtechball</title>
<link rel="stylesheet" href="bootstrap.min.css" type="text/css"/>
<script src="bootstrap.min.js" type="text/javascript"></script>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>

<script>
function counting(){
    var a = document.getElementById("char").value;
    var b = a.length;
    document.getElementById("count").innerHTML=b;
}
</script>
<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 id="char" rows="5" class="form-control" onKeyUp="counting()"></textarea>
                </div>
            </form>
            <div id="count"></div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>
</body>
</html>
Advertisements

One thought on “How to make fully responsive Character Counter through JavaScript ?

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