欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery计算textarea中文字数(剩余个数)的小程序

程序员文章站 2022-06-05 09:05:33
代码如下:

       

  ...

代码如下:


<p class="area">
        <p>
            还可以输入<b class="num">140</b>字</p>
        <textarea class="chacktextarea"></textarea>
    </p>

 
<script type="text/javascript">
    var txtobj = {
        pname: "area", //外层容器的class
        textareaname: "chacktextarea", //textarea的class
        numname: "num", //数字的class
        num: 140 //数字的最大数目
    }
    var textareafn = function () {
        //定义变量
        var $onthis; //指向当前
        var $pname = txtobj.pname; //外层容器的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("." + $pname).find("." + $numname); //获取当前的数字
            $par = $b.parent();
            $onthis = $(this); //获取当前的textarea
            var setnum = setinterval(numchange, 500);
        });
    }
    textareafn();
</script>