免费注册 查看新帖 |

Chinaunix

  平台 论坛 博客 文库
最近访问板块 发新帖
查看: 2005 | 回复: 0

artTxtCount 轻量级输入字数提示插件jQuery版 [复制链接]

论坛徽章:
0
发表于 2011-05-10 13:55 |显示全部楼层
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>artTxtCount</title>
  6. <script type="text/javascript" src="/ajaxjs/jquery1.3.2.js"></script>
  7. <script type="text/javascript">
  8. (function($){
  9.         // tipWrap:         提示消息的容器
  10.         // maxNumber:         最大输入字符
  11.         $.fn.artTxtCount = function(tipWrap, maxNumber){
  12.                 var countClass = 'js_txtCount',                // 定义内部容器的CSS类名
  13.                         fullClass = 'js_txtFull',                // 定义超出字符的CSS类名
  14.                         disabledClass = 'disabled';                // 定义不可用提交按钮CSS类名
  15.                
  16.                 // 统计字数
  17.                 var count = function(){
  18.                         var btn = $(this).closest('form').find(':submit'),
  19.                                 val = $(this).val().length,
  20.                                
  21.                                 // 是否禁用提交按钮
  22.                                 disabled = {
  23.                                         on: function(){
  24.                                                 btn.removeAttr('disabled').removeClass(disabledClass);
  25.                                         },
  26.                                         off: function(){
  27.                                                 btn.attr('disabled', 'disabled').addClass(disabledClass);
  28.                                         }
  29.                                 };
  30.                                
  31.                         if (val == 0) disabled.off();
  32.                         if(val <= maxNumber){
  33.                                 if (val > 0) disabled.on();
  34.                                 tipWrap.html('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57</span>');
  35.                         }else{
  36.                                 disabled.off();
  37.                                 tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57</span>');
  38.                         };
  39.                 };
  40.                 $(this).bind('keyup change', count);
  41.                
  42.                 return this;
  43.         };
  44. })(jQuery);
  45. </script>
  46. <script type="text/javascript">
  47. // demo
  48. jQuery(function(){
  49.        
  50.         // 批量
  51.         $('.autoTxtCount').each(function(){
  52.                 $(this).find('.text').artTxtCount($(this).find('.tips'), 140);
  53.         });
  54.        
  55.         // 单个
  56.         $('#test').artTxtCount($('#test_tips'), 10);
  57.        
  58. });
  59. </script>
  60. <style>
  61. /* demo */
  62. body { font-size:75%; font-family:'微软雅黑'; }
  63. #demo { width:500px; }
  64. #demo .help, #demo .help a { color:#999; }
  65. #demo form { margin:20px 0; padding:8px; background:#F4F4F4; border:1px solid #EDEDED; }
  66. #demo .tips { color:#999; padding:0 5px; }
  67. #demo .tips strong { color:#1E9300; }
  68. #demo .tips .js_txtFull strong { color:#F00; }
  69. #demo textarea.text { width:474px; }
  70. </style>
  71. </head>
  72. <body>
  73. <div id="demo">
  74.   <h1>artTxtCount轻量级输入字数提示插</h1>
  75.   <p class="help">$('#text').artTxtCount($('#text_tips'), 10);</p>
  76. <form class="autoTxtCount" action="" method="get">
  77.     <div>
  78.       <textarea class="text" name="" cols="50" rows="3"></textarea>
  79.     </div>
  80.     <div>
  81.       <button type="submit">提交</button>
  82.       <span class="tips"></span> </div>
  83.   </form>
  84.   <form class="autoTxtCount" action="" method="get">
  85.     <div>
  86.       <textarea class="text" name="" cols="50" rows="3"></textarea>
  87.     </div>
  88.     <div>
  89.       <button type="submit">提交</button>
  90.       <span class="tips"></span> </div>
  91.   </form>
  92.   <form action="" method="get">
  93.     <input class="text" id="test" name="" type="text" />
  94.     <span id="test_tips" class="tips"></span><br />
  95.     <button type="submit">提交</button>
  96.   </form>
  97. </div>
  98. </body>
  99. </html>
复制代码
您需要登录后才可以回帖 登录 | 注册

本版积分规则 发表回复

  

北京盛拓优讯信息技术有限公司. 版权所有 京ICP备16024965号-6 北京市公安局海淀分局网监中心备案编号:11010802020122 niuxiaotong@pcpop.com 17352615567
未成年举报专区
中国互联网协会会员  联系我们:huangweiwei@itpub.net
感谢所有关心和支持过ChinaUnix的朋友们 转载本站内容请注明原作者名及出处

清除 Cookies - ChinaUnix - Archiver - WAP - TOP