Advanced Search

Live Character Count Meter with Jquery

/ Published in: jQuery
Save to your folder(s)
$('#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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. ---javascript---
  2.  
  3. <script type="text/javascript" src="http://ajax.googleapis.com/
  4. ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  5. <script type="text/javascript">
  6. $(document).ready(function()
  7. {
  8. $("#contentbox").keyup(function()
  9. {
  10. var box=$(this).val();
  11. var main = box.length *100;
  12. var value= (main / 145);
  13. var count= 145 - box.length;
  14.  
  15. if(box.length <= 145)
  16. {
  17. $('#count').html(count);
  18. $('#bar').animate(
  19. {
  20. "width": value+'%',
  21. }, 1);
  22. }
  23. else
  24. {
  25. alert(' Full ');
  26. }
  27. return false;
  28. });
  29.  
  30. });
  31. </script>
  32.  
  33.  
  34. ---html---
  35.  
  36. <div>
  37. <div id="count">145</div>
  38. <div id="barbox"><div id="bar"></div></div>
  39. </div>
  40. <textarea id="contentbox"></textarea>
  41.  
  42.  
  43. ---css---
  44.  
  45. #bar
  46. {
  47. background-color:#5fbbde;
  48. width:0px;
  49. height:16px;
  50. }
  51. #barbox
  52. {
  53. float:right;
  54. height:16px;
  55. background-color:#FFFFFF;
  56. width:100px;
  57. border:solid 2px #000;
  58. margin-right:3px;
  59. -webkit-border-radius:5px;-moz-border-radius:5px;
  60. }
  61. #count
  62. {
  63. float:right; margin-right:8px;
  64. font-family:'Georgia', Times New Roman, Times, serif;
  65. font-size:16px;
  66. font-weight:bold;
  67. color:#666666
  68. }
  69. #contentbox
  70. {
  71. width:450px; height:50px;
  72. border:solid 2px #006699;
  73. font-family:Arial, Helvetica, sans-serif;
  74. font-size:14px;
  75. }

URL: http://www.9lessons.info/2010/04/live-character-count-meter-with-jquery.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.