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

 更新时间:2013年11月28日 10:59:04   作者:  
这篇文章主要介绍了jQuery计算textarea中文字数(剩余个数)的示例程序,大家参考使用吧

复制代码 代码如下:

<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>

相关文章

  • jQuery Validate 相关参数及常用的自定义验证规则

    jQuery Validate 相关参数及常用的自定义验证规则

    这篇文章主要介绍了jQuery Validate 相关参数及常用的自定义验证规则,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • 使用jquery如何获取时间

    使用jquery如何获取时间

    日期函数在程序开发中是一个重要的工具,js也提供了Date()函数,如获取当前时间,当前年月,已经系统时间的毫秒数。
    2016-10-10
  • Bootstrap栅格系统的使用详解

    Bootstrap栅格系统的使用详解

    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。这篇文章主要介绍了Bootstrap的核心——栅格系统的使用,需要的朋友可以参考下
    2017-10-10
  • jQuery实用技巧

    jQuery实用技巧

    使用jquery最重要的就是熟悉它的属性,方法等,下面总结的真不错,经常用的都总结出来了
    2008-06-06
  • jQuery中extend函数详解

    jQuery中extend函数详解

    这篇文章主要介绍了jQuery中extend函数详解的相关资料,需要的朋友可以参考下
    2015-07-07
  • jquery 上下滚动广告

    jquery 上下滚动广告

    jquery 上下滚动广告实现代码,大家可以自行测试,需要加载jquery类库
    2009-06-06
  • jQuery Flash/MP3/Video多媒体插件

    jQuery Flash/MP3/Video多媒体插件

    jQuery Flash/MP3/Video多媒体插件,主要是用来加载flash或mp3等网络媒体文件。
    2010-01-01
  • jQuery实现上传图片前预览效果功能

    jQuery实现上传图片前预览效果功能

    这篇文章主要为大家详细介绍了jQuery实现上传图片前预览效果功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • jQuery实现炸裂轮播效果

    jQuery实现炸裂轮播效果

    这篇文章主要为大家详细介绍了jQuery实现炸裂轮播效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 深入理解jQuery3.0的domManip函数

    深入理解jQuery3.0的domManip函数

    domManip函数可以说是jquery中一个元老级工具函数了,domManip 的主要功能是为了实现 DOM 的插入和替换。接下来通过本文给大家谈谈jQuery3.0的domManip函数的理解,非常不错,感兴趣的朋友一起看看吧
    2016-09-09

最新评论