带Jquery的实时字符计数表

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了带Jquery的实时字符计数表相关的知识,希望对你有一定的参考价值。

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

以上是关于带Jquery的实时字符计数表的主要内容,如果未能解决你的问题,请参考以下文章

带AJAX和Jquery的asp.net MVC中的实时搜索数据

实时字符计数器

带逗号的 Jquery 计数器

jQuery 字符计数变量问题

3 带计数的表查询

web代码片段