JavaScript文本框输入数字倒计实例代码

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > JavaScript文本框输入数字倒计实例代码

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

代码实例如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<title>文本框输入文字倒计实例代码-51前端</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>

代码描述：JavaScript文本框输入数字倒计。JavaScript文本框输入数字倒计实例代码

下载全部收藏

128 171

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册