新浪微博をまねて、入力できる字数制限textareaを提示します.

2191 ワード

js:
var txtobj={
   divName:"area", //     class
   textareaName:"chackTextarea", //textarea class
   numName:"num", //   class
   num:140 //       
  }
  
  var textareaFn=function(){
   //    
   var $onthis;//    
   var $divname=txtobj.divName; //     class
   var $textareaName=txtobj.textareaName; //textarea class
   var $numName=txtobj.numName; //   class
   var $num=txtobj.num; //       
   
   function isChinese(str){  //       
    var reCh=/[u00-uff]/;
    return !reCh.test(str);
   }
   function numChange(){
    var strlen=0; //       0
    var txtval = $.trim($onthis.val());
    for(var i=0;i<txtval.length;i++){
     if(isChinese(txtval.charAt(i))==true){
      strlen=strlen+2;//   2   
     }else{
      strlen=strlen+1;//      
     }
    }
    strlen=Math.ceil(strlen/2);//      2   
    if($num-strlen<0){
     $par.html("   <b style='display:inline;color:red;font-weight:lighter' class="+$numName+">"+Math.abs($num-strlen)+"</b>  "); //     
    }
    else{
     $par.html("      <b style='display:inline;' class="+$numName+">"+($num-strlen)+"</b>  "); //    
    }
    $b.html($num-strlen);   
    $("#areaLength").val(strlen);
   }
   $("."+$textareaName).live("focus",function(){
    $b=$(this).parents("."+$divname).find("."+$numName); //       
    $par=$b.parent(); 
    $onthis=$(this); //     textarea
    var setNum=setInterval(numChange,500);    
   });
  }     
  textareaFn();
<div class="area">
				<div class="box01-num">
					<input type="hidden" name="areaLength" id="areaLength"/>
					<p>      <b style="display:inline;" class="num">140</b> </p>
				</div>
				<div class="inputarea">
					 <textarea class="chackTextarea" id="content" name="content" rows="15" ><s:property value='msgBo.content'/></textarea>
				</div>
			</div>