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

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

先看看效果图：

代码如下：

超文本标记语言标题文本框输入文字倒计效果代码/title style type=' text/CSS ' * { margin :0；划水：0;} .盒子{ width :500 pxmargin :10 px汽车；} p span { color : # 069 font-weight : bold；} textarea { width:300px}。文本颜色{底色： # 0c 9；} .灰色FFF；背景色： # CCCCCC；}/style脚本类型=' text/JavaScript ' src=' http : jquery/jquery-1。8 .3 .js '/script脚本类型=' text/JavaScript ' $(function(){ var $ tex=$(').tex’)；var $但=$('。但是');var ie=jquery。支持。html序列化；var str=0；var ABC数=0；var MaxNum=280 var texts=0；$ tex。val(')；$ tex。focus(function(){ if($ tex。val()=' '){ $(' p ').html(")您还可以输入的字数跨度140/跨度’；} })$ tex。blur(function(){ if($ tex。val()==' '){ $(' p ').html(")请在下面输入您的文字：');} }) if(ie) { $tex[0].on input=ChangeNum } else { $ tex[0]} .onpropertychange=changeNum }函数changeNum() { //汉字的个数str=($tex.val().替换(/\w/g ' ').长度；//非汉字的个数abcnum=$tex.val().长度字符串；total=str * 2 abcnumif(str * 2 abcnumaxnum | | str * 2 abcnum==maxNum){ $ but。移除类()$ but。add class(' but ')；文本=数学。ceil((MaxNum-(str * 2 abcnum))/2)；$('p ').html(")您还可以输入的字数span' texts '/span ').儿童()。CSS({ ' color ' : ' blue ' })；} else if(str * 2 abcnumxnum){ $ but。移除类(')$ but。addclass('灰色')；文本=数学。ceil((str * 2 abcnum)-MaxNum)/2)；$('p ').html(")您输入的字数超过了span' texts '/span ').儿童(' span ').CSS({ ' color ' : ' red ' })；} } })/脚本/头体div class='box' p请在下面输入您的文字：/p文本区域名称=' weibao ' class=' tex ' cols=' rows=' 8 '/文本区域/div/body/html希望本文所述对大家学习爪哇岛描述语言程序设计有所帮助。