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

前端技术 2023/09/07 JavaScript

复制代码 代码如下:

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

 
<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() {
            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();
</script>

本文地址:https://www.stayed.cn/item/17785

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。