轻量级输入字数提示jQuery插件
2013-03-20 16:27
399 查看
(function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大输入字符 $.fn.artTxtCount = function(tipWrap, maxNumber){ var countClass = 'js_txtCount', // 定义内部容器的CSS类名 fullClass = 'js_txtFull', // 定义超出字符的CSS类名 disabledClass = 'disabled'; // 定义不可用提交按钮CSS类名 // 统计字数 var count = function(){ var btn = $(this).closest('form').find(':submit'), val = $(this).val().length, // 是否禁用提交按钮 disabled = { on: function(){ btn.removeAttr('disabled').removeClass(disabledClass); }, off: function(){ btn.attr('disabled', 'disabled').addClass(disabledClass); } }; if (val == 0) disabled.off(); if(val <= maxNumber){ if (val > 0) disabled.on(); tipWrap.html('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57</span>'); }else{ disabled.off(); tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57</span>'); }; }; $(this).bind('keyup change', count); return this; }; })(jQuery);
一下是DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>artTxtCount demo</title> <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> /* tangbin - http://www.planeArt.cn - MIT Licensed */ (function($){ // tipWrap: 提示消息的容器 // maxNumber: 最大输入字符 $.fn.artTxtCount = function(tipWrap, maxNumber){ var countClass = 'js_txtCount',// 定义内部容器的CSS类名 fullClass = 'js_txtFull',// 定义超出字符的CSS类名 disabledClass = 'disabled';// 定义不可用提交按钮CSS类名 // 统计字数 var count = function(){ var btn = $(this).closest('form').find(':submit'), val = $(this).val().length, // 是否禁用提交按钮 disabled = { on: function(){ btn.removeAttr('disabled').removeClass(disabledClass); }, off: function(){ btn.attr('disabled', 'disabled').addClass(disabledClass); } }; if (val == 0) disabled.off(); if(val <= maxNumber){ if (val > 0) disabled.on(); tipWrap.html('<span class="' + countClass + '">\u8FD8\u80FD\u8F93\u5165 <strong>' + (maxNumber - val) + '</strong> \u4E2A\u5B57</span>'); }else{ disabled.off(); tipWrap.html('<span class="' + countClass + ' ' + fullClass + '">\u5DF2\u7ECF\u8D85\u51FA <strong>' + (val - maxNumber) + '</strong> \u4E2A\u5B57</span>'); }; }; $(this).bind('keyup change', count); return this; }; })(jQuery); </script> <script type="text/javascript"> // demo jQuery(function(){ // 批量 $('.autoTxtCount').each(function(){ $(this).find('.text').artTxtCount($(this).find('.tips'), 140); }); // 单个 $('#test').artTxtCount($('#test_tips'), 10); }); </script> <style> /* demo */ body { font-size:75%; font-family:'微软雅黑'; } #demo { width:500px; } #demo .help, #demo .help a { color:#999; } #demo form { margin:20px 0; padding:8px; background:#F4F4F4; border:1px solid #EDEDED; } #demo .tips { color:#999; padding:0 5px; } #demo .tips strong { color:#1E9300; } #demo .tips .js_txtFull strong { color:#F00; } #demo textarea.text { width:474px; } </style> </head> <body> <div id="demo"> <h1>artTxtCount - 轻量级输入字数提示插</h1> <p class="help">$('#text').artTxtCount($('#text_tips'), 10);</p> <p class="help">by tangbin. <a href="http://www.planeArt.cn" target="_blank" title="planeArt">www.planeArt.cn</a></p> <form class="autoTxtCount" action="" method="get"> <div> <textarea class="text" name="" cols="50" rows="3"></textarea> </div> <div> <button type="submit">提交</button> <span class="tips"></span> </div> </form> <form class="autoTxtCount" action="" method="get"> <div> <textarea class="text" name="" cols="50" rows="3"></textarea> </div> <div> <button type="submit">提交</button> <span class="tips"></span> </div> </form> <form action="" method="get"> <input class="text" id="test" name="" type="text" /> <span id="test_tips" class="tips"></span><br /> <button type="submit">提交</button> </form> </div> </body> </html>
DEMO代码保存即可运行
相关文章推荐
- jquery插件artTxtCount输入字数限制,并提示剩余字数
- jquery 小插件,完成“输入字段预期值的提示信息”,防html5 placeholder属性
- jquery仿alert提示框、confirm确认对话框、prompt带输入的提示框插件[附实例演示]
- 轻量级工具提示jQuery插件 - Tooltipster(转)
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- 发布一个在Web下输入密码时提示大写锁定键的Jquery插件
- BootStrap入门教程 (四) :JQuery类库插件(模态窗口,滚动监控,标签效果,提示效果,“泡芙”效果,警告区域,折叠效果,旋转木马,输入提示)
- 分享一个仅0.7KB的jQuery文本框输入提示插件
- jquery插件--在input下输入密码时提示大写锁定键
- jQuery插件InputLimitor实现文本框输入限制字数统计
- jquery限制输入字数,并提示剩余字数实现代码
- jQuery插件InputLimitor实现文本框输入限制字数统计
- jquery限制输入字数,并提示剩余字数实现代码
- jQuery表单输入文字统计字数插件
- jquery插件——仿新浪微博限制输入字数的textarea
- Jquery 插件限制文本框输入的字数,包括字母,汉字
- jquery artTxtCount 文本框输入字数提示
- 实现输入内容提示的功能(仿google_百度输入框提示)jquery.ui.autocomplete.js插件
- jQuery.Autocomplete输入提示/自动完成插件
- 轻量级jQuery工具提示插件tooltipsy使用方法