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.
ReplyDeleteThere 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 :)
ReplyDeleteNice and Very Usefull, Man
ReplyDeletemy first visit here...
ReplyDeleteyour 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.
ReplyDeleteHi,
ReplyDeletethis is really simple and usefull.
Thanks :)
this is one of the cool site i have ever seen.
ReplyDeleteas others have said i have also noticed that it doesn't stop after mentioned limit.
good one. thanks
ReplyDeletecool mate!
ReplyDeleteHow can this be integrated to Twitter API?
ReplyDeleteThanks. Mine is a Twitter like dynamic character counter.
ReplyDeleteThanks for the effort. Adding this line:
ReplyDeletevar 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!
ReplyDeleteIt doesn't work on IE 8...
ReplyDeleteI think you could get better results with this right here:
ReplyDelete.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
ReplyDelete@Josea
ReplyDeleteDownload 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
ReplyDeleteGood
ReplyDeleteits having no limit...whats the use then?
ReplyDeleteThis comment has been removed by the author.
ReplyDeletenice. You should also bind "change" event with textbox because its not working when we paste data using mouse.
ReplyDeletelove it ..... thanks for sharing
ReplyDeletethanks brother..........
ReplyDeleteHello Srinivas,
ReplyDeleteMany thanks for the amazing post. I would like to integrate your character counter script into my Cforms II wordpress plugin but I have no idea how I can do that? As i am not technically oriented at all. Would it be possible if you could offer me some proper guidance? I would extremely appreciate it!
Cheers
Ziad
/* thankyou srinivas but maybe you need to detect paste or cut from mouse right click */
ReplyDelete$(document).ready(function()
{
function count_text(noid){
var box=$("#"+noid).val();
var main = box.length *100;
var value= (main / 350);
var count= 350 - box.length;
if(box.length <= 350)
{
$('#count').html(count);
$('#bar').animate(
{
"width": value+'%',
}, 1);
}
return false;
}
$("#desc").bind({
paste : function(){
setTimeout(function(e) {
count_text("desc");
}, 0);
},keyup:function(){
setTimeout(function(e) {
count_text("desc");
}, 0);
},
cut : function(){
setTimeout(function(e) {
count_text("desc");
}, 0);
}
});
});
Nice charisma...
ReplyDeletehow come this does not work for me? :/
ReplyDeleteSorry If I am wrong pasting characters is not increasing the count
ReplyDeleteFix to make it work with IE is to change:
ReplyDelete"width": value+'%',
to:
"width": value+'%'