新浪微博をまねて、入力できる字数制限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>