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/
时间： 2024-10-12 16:00:12