加载中…需要练习的jquery效果
(2012-06-08 16:26:12)
标签：
jquery效果it |
分类： jquery那些事 |
<一>实现的textarea的字数动态的加减
<p>还可以输入<b
class="num">140</b>字</p>
<textarea
class="chackTextarea"></textarea>
<p>还可以输入<b
class="num">140</b>字</p>
<textarea
class="chackTextarea"></textarea>
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='color:red;font-weight:lighter'
class="+$numName+">"+Math.abs($num-strlen)+"</b>
字"); //超出的样式
}
else{
$par.html("还可以输入 <b
class="+$numName+">"+($num-strlen)+"</b>
字"); //正常时候
}
$b.html($num-strlen);
}
$("."+$textareaName).live("focus",function(){
$b=$(this).parents("."+$divname).find("."+$numName);
//获取当前的数字
$par=$b.parent();
$onthis=$(this);
//获取当前的textarea
var
setNum=setInterval(numChange,500);
});
}
textareaFn();
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>jQuery实现TextArea输入框中输入字数减少的提示效果</title>
<style type="text/css">
</style>
</head>
<body>
<div class="area">
</div>
<div class="area">
</div>
<script type="text/javascript"
src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script
type="text/javascript">
</script>
</body>
</html>
喜欢
0
赠金笔