<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>文本框输入文字倒计效果代码-蚂蚁部落</title> <style type="text/css"> * { margin:0; padding:0; } .box { width:500px; margin:10px auto; } p span { color:#069; font-weight:bold; } textarea { width:300px; } .textColor { background-color:#0C9; } .grey { padding:5px; color:#FFF; background-color:#CCCCCC; } </style> <script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ var $tex=$(".tex"); var $but=$(".but"); var ie=jQuery.support.htmlSerialize; var str=0; var abcnum=0; var maxNum=280; var texts=0; $tex.val(""); $tex.focus(function(){ if($tex.val()=="") { $("p").html("您还可以输入的字数<span>140</span>"); } }) $tex.blur(function(){ if($tex.val() == "") { $("p").html("请在下面输入您的文字："); } }) if(ie) { $tex[0].oninput = changeNum; } else { $tex[0].onpropertychange = changeNum; } function changeNum() { //汉字的个数 str=($tex.val().replace(/\w/g,"")).length; //非汉字的个数 abcnum=$tex.val().length-str; total=str*2+abcnum; if(str*2+abcnum<maxNum||str*2+abcnum==maxNum) { $but.removeClass() $but.addClass("but"); texts=Math.ceil((maxNum-(str*2+abcnum))/2); $("p").html("您还可以输入的字数<span>"+texts+"</span>").children().css({"color":"blue"}); } else if(str*2+abcnum>maxNum) { $but.removeClass("") $but.addClass("grey"); texts =Math.ceil(((str*2+abcnum)-maxNum)/2); $("p").html("您输入的字数超过了<span>"+texts+"</span>").children("span").css({"color":"red"}); } } }) </script> </head> <body> <div class="box"> <p>请在下面输入您的文字：</p> <textarea name="weibao" class="tex" cols="" rows="8"></textarea> </div> </body> </html>
原文：http://www.cnblogs.com/silvan01/p/3543924.html