您的位置：首页 > Web前端 > JQuery

jquery 限制字数显示输入字数插件

2013-09-17 16:32 423 查看

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>无标题文档</title>
<scripttype="text/javascript"src="jquery.min.js"></script>
<scripttype="text/javascript"src="artTxtCount.js"></script>
<style>
/*demo*/
body{font-size:75%;font-family:'微软雅黑';}
#demo{width:500px;}
#demo.help,#demo.helpa{color:#999;}
#demoform{margin:20px0;padding:8px;background:#F4F4F4;border:1pxsolid#EDEDED;}
#demo.tips{color:#999;padding:05px;}
#demo.tipsstrong{color:#1E9300;}
#demo.tips.js_txtFullstrong{color:#F00;}
#demotextarea.text{width:474px;}
</style>
</head>
<scripttype="text/javascript">
$(document).ready(function(){
$(".autoTxtCount").each(function(){
$(this).find(".text").artTxtCount($(this).find('.tips'),120);

});
$("#test").artTxtCount($("#test_tips"),10)

});
</script>
<body>
<divid="demo">
<h1>artTxtCount-轻量级输入字数提示插</h1>
<formclass="autoTxtCount"action=""method="get">
<div>
<textareaclass="text"name=""cols="50"rows="3"></textarea>
</div>
<div>
<buttontype="submit">提交</button>
<spanclass="tips"></span></div>
</form>
<formclass="autoTxtCount"action=""method="get">
<div>
<textareaclass="text"name=""cols="50"rows="3"></textarea>
</div>
<div>
<buttontype="submit">提交</button>
<spanclass="tips"></span></div>
</form>
<formaction=""method="get">
<inputclass="text"id="test"name=""type="text"/>
<spanid="test_tips"class="tips"></span><br/>
<buttontype="submit">提交</button>
</form>
</div>
</body>
</html>

以下是artTxtCount.js

(function($){
$.fn.artTxtCount=function(tipWrap,maxNumber){
varcountClass='js_txtCount',//定义内部容器的CSS类名
fullClass='js_txtFull',//定义超出字符的CSS类名
disabledClass='disabled';//定义不可用提交按钮CSS类名

varcount=function(){

varbtn=$(this).closest('form').find(':submit');
varval=$(this).val().length;
vardisabled={
on:function(){
btn.removeAttr('disabled').removeClass("disabled");
},
off:function(){
btn.attr('disabled','disabled').addClass(disabledClass);
}
}
if(val==0)disabled.off();
if(val<=maxNumber){
if(val>0)disabled.on();
tipWrap.html('<spanclass="'+countClass+'">\u8FD8\u80FD\u8F93\u5165<strong>'+(maxNumber-val)+'</strong>\u4E2A\u5B57</span>');
}
else{
disabled.off();
tipWrap.html(maxNumber-val);
}
};

$(this).bind('keyupchange',count);

returnthis;

}

})(jQuery);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jquery 限制字数 显示输入字数 插件

jquery 限制字数显示输入字数插件