Live Character Count Meter with Jquery.
Wall Script
Follow Me:
Saturday, April 10, 2010

Live Character Count Meter with Jquery.

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.

jquery live character count meter

Download Script     Live Demo

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="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>



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>

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;
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


31 comments:

  1. Again a nice and useful post.
    There should be automatic remove functionality for extra characters.

    ReplyDelete
  2. I use a similar thing for one of my sites, I like the progress bar that I don't have :)

    ReplyDelete
  3. my first visit here...
    your blog very usefully...
    nice to meet you my broder...salom from bandung blogger Indonesia
    thanks ^_^'

    ReplyDelete
  4. there still have a bug. no stop in limit character.

    ReplyDelete
  5. Hi,

    this is really simple and usefull.

    Thanks :)

    ReplyDelete
  6. 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.

    ReplyDelete
  7. How can this be integrated to Twitter API?

    ReplyDelete
  8. Thanks. Mine is a Twitter like dynamic character counter.

    ReplyDelete
  9. 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

    ReplyDelete
  10. This is not working in IE7, please check!

    ReplyDelete
  11. It doesn't work on IE 8...

    ReplyDelete
  12. 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.

    ReplyDelete
  13. can i run this on my localhost only?????do i need internet connection on running these?? pls reply

    ReplyDelete
  14. @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>

    ReplyDelete
  15. its having no limit...whats the use then?

    ReplyDelete
  16. This comment has been removed by the author.

    ReplyDelete
  17. nice. You should also bind "change" event with textbox because its not working when we paste data using mouse.

    ReplyDelete
  18. love it ..... thanks for sharing

    ReplyDelete
  19. Hello Srinivas,

    Many 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

    ReplyDelete
  20. Hi, thanks for this, very nice.

    I have got the box to open in a lightbox on clicking a button, but all I can get to display is the contentbox. Is it possible to pull the count and bar into the lightbox too?

    ReplyDelete
  21. /* thankyou srinivas but maybe you need to detect paste or cut from mouse right click */

    $(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);
    }
    });
    });

    ReplyDelete
  22. how come this does not work for me? :/

    ReplyDelete
  23. Sorry If I am wrong pasting characters is not increasing the count

    ReplyDelete
  24. Fix to make it work with IE is to change:

    "width": value+'%',

    to:

    "width": value+'%'

    ReplyDelete

Make in India