你的位置:首页 > Java教程

[Java教程]文本框输入数字倒计实例代码


文本框输入数字倒计实例代码:
一般情况下,文本框中文字的个数并不是无限的,也就是说具有一定的限制,在人性化程度较好的网站一般有输入文字倒计效果,这样可以便于浏览者组织语言,下面就简单介绍一下如何实现此效果。
代码实例如下:

 

<!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/