当前位置： 文江博客话题详情

artTxtCount 轻量级输入字数提示插件jQuery版

发布于 2022-10-15 07:24:13 字数 8514 浏览 18 评论 0

  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>

复制代码

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

小矜持

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

1CH1MKgiKxn9p

文章 0 评论 0

ゞ记忆︶ㄣ

文章 0 评论 0

JackDx

文章 0 评论 0

信远

文章 0 评论 0

yaoduoduo1995

文章 0 评论 0

霞映澄塘

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文