How to display real time characters count using jQuery?

In this post I want to explain how to do live characters count meter using Jquery. It is interesting and simple just ten lines of java script code. Use it and enrich your web applications with jquery.

Javascript code
$(‘#contentbox’).keyup(function(){} – contentbox is the ID of the textbox. Using $(this).val() getting the textbox value. bar is the div ID of the count meter $(‘#bar’).animate() increasing the width.

<script type="text/javascript" src=""></script>
<script type="text/javascript">
var box=$(this).val();
var main = box.length *100;
var value= (main / 160);
var count= 160 - box.length;

if(box.length <= 160)
"width": value+'%',

}, 1);
return false;


Contains simple HTML code.

<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
<textarea id="contentbox"></textarea>

CSS Code

body { font-family:Verdana, Arial, Helvetica, sans-serif; }
#contentbox { width:360px; height:50px; border:solid 2px #0000FF; 
font-family:Arial, Helvetica, sans-serif; font-size:14px; }
#bar { background-color:#0000CC; width:0px; height:16px; }
#barbox { float:right; height:16px; background-color:#FFFFFF; width:100px; border:solid 2px #0033FF; 
#count {
float:right; margin-right:8px;
font-family:'Georgia', Times New Roman, Times, serif;
font-size:16px; font-weight:bold; color:#FF0000;
.weblink {
padding:4px; border:#333 1px solid;
.wtext {
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:14px; font-weight:bold; float:left;

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!

By Rodney

I’m Rodney D Clary, a web developer. If you want to start a project and do a quick launch, I am available for freelance work.

Leave a Reply

Your email address will not be published. Required fields are marked *