In this post I want to explain how to do live character or word 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.
Download Script 
Live DemoJavascript 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="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;
if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Full ');
}
return false;
});
});
</script>
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var box=$(this).val();
var main = box.length *100;
var value= (main / 145);
var count= 145 - box.length;
if(box.length <= 145)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
else
{
alert(' Full ');
}
return false;
});
});
</script>
HTML Code
Contains simple HTML code.
<div>
<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<textarea id="contentbox"></textarea>
<div id="count">145</div>
<div id="barbox"><div id="bar"></div></div>
</div>
<textarea id="contentbox"></textarea>
CSS Code
#bar
{
background-color:#5fbbde;
width:0px;
height:16px;
}
#barbox
{
float:right;
height:16px;
background-color:#FFFFFF;
width:100px;
border:solid 2px #000;
margin-right:3px;
-webkit-border-radius:5px;-moz-border-radius:5px;
}
#count
{
float:right; margin-right:8px;
font-family:'Georgia', Times New Roman, Times, serif;
font-size:16px;
font-weight:bold;
color:#666666
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
{
background-color:#5fbbde;
width:0px;
height:16px;
}
#barbox
{
float:right;
height:16px;
background-color:#FFFFFF;
width:100px;
border:solid 2px #000;
margin-right:3px;
-webkit-border-radius:5px;-moz-border-radius:5px;
}
#count
{
float:right; margin-right:8px;
font-family:'Georgia', Times New Roman, Times, serif;
font-size:16px;
font-weight:bold;
color:#666666
}
#contentbox
{
width:450px; height:50px;
border:solid 2px #006699;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
}
Again a nice and useful post.
There should be automatic remove functionality for extra characters.
I use a similar thing for one of my sites, I like the progress bar that I don't have :)
Nice and Very Usefull, Man
my first visit here...
your blog very usefully...
nice to meet you my broder...salom from bandung blogger Indonesia
thanks ^_^'
there still have a bug. no stop in limit character.
Hi,
this is really simple and usefull.
Thanks :)
this is one of the cool site i have ever seen.
as others have said i have also noticed that it doesn't stop after mentioned limit.
good one. thanks
cool mate!
How can this be integrated to Twitter API?
Thanks. Mine is a Twitter like dynamic character counter.
Thanks for the effort. Adding this line:
var trimmed = $(this).val().substring(0,145);
$(this).val(trimmed);
instead of:
alert(' Full ');
will complement the solution.
Regards
This is not working in IE7, please check!
It doesn't work on IE 8...
I think you could get better results with this right here:
.bind("input paste", function(e) {
--------------
at least it did for me, I found out about it while doing something like the twitter chars counter and it works perfectly, even if you paste/hold down keys it will keep counting and wont wait until you lift up your fingers to refresh the counter.
Tested on chrome/opera/firefox.
can i run this on my localhost only?????do i need internet connection on running these?? pls reply
@Josea
Download jquery.min.js file replace the library file
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
to
<script type="text/javascript" src="jquery.min.js"<</script>
Thanks
Good
its having no limit...whats the use then?
nice. You should also bind "change" event with textbox because its not working when we paste data using mouse.