你的位置:首页 > Java教程

[Java教程]jQuery实现的计算textarea可输入剩余字数


jQuery实现的计算textarea可输入剩余字数:
textarea一般是用来输入文字性内容的,不过出于各种原因的考虑,文字的数量一般是受到限制的,下面就通过实例代码介绍一下,如何实现此效果,代码如下:

 

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script><script type="text/javascript">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()  {  //初始定义长度为0  var strlen = 0;   var txtval = $.trim($onthis.val());  for (var i = 0; i < txtval.length; i++)   {   if(isChinese(txtval.charAt(i)) == true)   {     //中文为2个字符    strlen = strlen + 2;    }    else    {    //英文一个字符    strlen=strlen+1;    }  }  //中英文相加除2取整数  strlen = Math.ceil(strlen / 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();  //获取当前的textarea  $onthis = $(this);   var setNum = setInterval(numChange, 500); });}$(document).ready(function(){ textareaFn(); })</script></head><body><div class="area"><p>还可以输入<b class="num">140</b>字</p><textarea class="chackTextarea"></textarea></div></body></html>

 

以上代码实现了我们的要求,不但能够给出剩余的字数,还会提示超出的字数。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10771

更多内容可以参阅:http://www.softwhy.com/jquery/