标签：
文本框输入数字倒计实例代码:
一般情况下，文本框中文字的个数并不是无限的，也就是说具有一定的限制，在人性化程度较好的网站一般有输入文字倒计效果，这样可以便于浏览者组织语言，下面就简单介绍一下如何实现此效果。
代码实例如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <title>文本框输入文字倒计实例代码-蚂蚁部落</title> <style type="text/css"> #spOwner_Name{color:#808080} </style> <script type="text/javascript"> function textLimitCheckSj(thisArea, maxLength, SpanId) { var str=thisArea.value; if(getChrLen(str, maxLength)>maxLength*2) { thisArea.value = str.substring(0,x-1); } else { var leftStr=‘(剩余字数:‘+Math.floor((maxLength*2-getChrLen(str, maxLength))/2)+‘)‘; document.getElementById(SpanId).innerHTML=leftStr; } } function getChrLen(str,maxLength) { var realLength=0; var len=str.length; var charCode=-1; x=0; for(;(x<len)&&(realLength<=maxLength*2);x++) { charCode=str.charCodeAt(x); if(charCode>=0&&charCode<=128) { realLength+=1; } else { realLength+=2; } } return realLength; } window.onload=function() { var ocontent=document.getElementById("content"); ocontent.onkeyup=function(){textLimitCheckSj(this,50,‘spOwner_Name‘)} } </script> <body> <textarea id="content"></textarea> <span id="spOwner_Name"><em>（50字以内）</em></span> </body> </html>
以上代码实现了我们想要的效果，当输入内容的时候，能够实时提醒还可以输入的长度，下面就简单介绍一下实现过程。
一.实现原理:
此代码实现的是计算可以输入汉字的个数,在unicode编码中，英文和数字在0-128范围内，只占一个字节，汉字占两个字节。当键盘按键松开时就会触发onkeyup事件，事件处理函数能够计算当前输入字符的长度，并且将剩余的可以输入的汉字个数写入span中，原理大致如此，下面对代码进行一下详细注释。
二.代码注释:
1.function textLimitCheckSj(thisArea,maxLength,SpanId){}，此函数用作onkeyup事件处理函数，第一个参数是textarea文本框对象，第二个是输入汉字的最大个数，第三个是span元素的id。
2.var str=thisArea.value，将输入到文本框的内容赋值给变量str。
3.if(getChrLen(str,maxLength)>maxLength*2)，判断输入的长度是否超出规定，50个是汉字的个数，一个汉字占两个字节。
4.thisArea.value=str.substring(0,x-1)，用来截取字符串，在这里也就是删除最后一个输入的字符。
5. var leftStr=‘(剩余字数:‘+Math.floor((maxLength*2-getChrLen(str, maxLength))/2)+‘)‘，计算出剩余可以输入的汉字数，并组织成字符串。
6.document.getElementById(SpanId).innerHTML=leftStr，将组织好的字符写入span。
7.function getChrLen(str,maxLength) {}，此函数用来返回字符串的长度，第二个参数是字符串，第二个是最大汉字的个数。
8.var realLength=0，声明一个变量用于存放字符串的长度。
9.var len=str.length，获取字符串中字符的个数。
10.var charCode=-1，此变量用来unicode码值的，当前初始化为-1。
11.x=0，在for循环中使用。
12.for(;(x<len)&&(realLength<=maxLength*2);x++){}，遍历输入字符串的字符，里面的限定条件非常的重要，如果没有realLength<=maxLength*2限定条件，那么文本框将无法正确限定字符串的个数。
13.charCode=str.charCodeAt(x)，获取指定索引的字符的unicode码值。
14.if(charCode>=0&&charCode<=128)，判断是否是占一个字节的英文字符或者数字。
15.realLength+=1，长度加1。
16.realLength+=2，如果是汉字长度加2。
17.return realLength，返回长度值。
三.相关阅读:
1.this可以参阅JavaScript的this用法详解一章节。
2.value属性可以参阅javascript的textarea.value属性一章节。
3.substring()函数可以参阅javascript的String对象的substring()方法一章节。
4.Math.floor()函数可以参阅javascript的Math.floor()方法一章节。
5.innerHTML属性可以参阅js的innerHTML属性的用法一章节。
6.charCodeAt()函数可以参阅javascript的String对象的charCodeAt()方法一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9734
更多内容可以参阅:http://www.softwhy.com/javascript/
标签：
原文地址：http://www.cnblogs.com/nulifendou/p/5129015.html
