js实现文本框输入文字个数限制代码

通常情况下，文本框输入的文字个数并不是无限制的，一般都会限定一个输入最高上限，较为人性化的网站可能会有可输入字数倒计效果，比如还剩余20可以输入这样的提示，下面就通过一个实例介绍一下如何实现此效果。
先看看效果图：

代码如下:

<html> <head> <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="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>

希望本文所述对大家学习javascript程序设计有所帮助。