textarea字数实时统计方案

最近找了一个通过js实时显示textarea字数统计的方法，稍加修改使它变得更加易用，下面是效果。拉伸和缩小不会影响统计显示。提供了两种计算字数方式。
textarea字数实时统计方案

textarea字数实时统计方案

具体计算规则可以在js中修改

下面是使用方法,使用非常简单，只需要引入js，在script标签内引用如下方法即可。
需要注意的是显示字数的标签需要自行定位，当然，下文的示例中也可以看到。

<script>
	//依次传入要计算的textarea的id,要输出字数统计的标签的id,和字数限制数
	startMonitor('content', 'aaa',300);
</script>

引用的js

    /* 
    *******************************************************************
    重要，因为设置maxLength的缘故，textarea自带属性的计算方式为无论中英文都计算为一个字符，
    和本文有出入，如果希望同步需要只需要切换最下方向标签内写值的方法即可（已提供）
    *******************************************************************
    */

//传入参数依次为textarea的id和需要输出字数的span的id
function startMonitor(id, outId,max) {

   //给textarea附加最大字数限制
     $('#' + id + '').attr('maxLength',max);
     
    var EventUtil = function() {};

    EventUtil.addEventHandler = function(obj, EventType, Handler) {
        //如果是FF
        if (obj.addEventListener) {
            obj.addEventListener(EventType, Handler, false);
        }
        //如果是IE
        else if (obj.attachEvent) {
            obj.attachEvent('on' + EventType, Handler);
        } else {
            obj['on' + EventType] = Handler;
        }
    }

    if ($("#" + id + "")) {
        var target = document.getElementById(id);
        EventUtil.addEventHandler(target, 'propertychange', CountChineseCharacters);
        EventUtil.addEventHandler(target, 'input', CountChineseCharacters);
        //EventUtil.addEventHandler($('chaptercontent'),'keydown',CountChineseCharacters('chaptercontent'));
    }
    window.onload = CountChineseCharacters();

    function CountChineseCharacters() {
        Words = $('#' + id + '').val();
        var W = new Object();
        var Result = new Array();
        var iNumwords = 0;
        var sNumwords = 0;
        var sTotal = 0; //双字节字符;
        var iTotal = 0; //中文字符；
        var eTotal = 0; //Ｅ文字符
        var otherTotal = 0;
        var bTotal = 0;
        var inum = 0;

        for (i = 0; i < Words.length; i++) {
            var c = Words.charAt(i);
            if (c.match(/[\u4e00-\u9fa5]/)) {
                if (isNaN(W[c])) {
                    iNumwords++;
                    W[c] = 1;
                }
                iTotal++;
            }
        }

        for (i = 0; i < Words.length; i++) {
            var c = Words.charAt(i);
            if (c.match(/[^\x00-\xff]/)) {
                if (isNaN(W[c])) {
                    sNumwords++;
                }
                sTotal++;
            } else {
                eTotal++;
            }
            if (c.match(/[0-9]/)) {
                inum++;
            }
        }
        //新浪计算方式
        //$('#' + outId + '').text(Math.ceil(sTotal + eTotal / 2)+"/"+max);
        //无论英文汉子都算一个字符方式
        $('#' + outId + '').html((sTotal + eTotal)+"/"+max);
    }

}

html页面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        #textarea_box{
            position: relative;
            display: inline-block;
        }
        #text_count_p{
            position: absolute;
            margin: 0;
            bottom: 10px;
            right: 20px;
        }
    </style>
    <body>
        <h3 class="alert alert-success">快速计算字数和字符数的小工具（和新浪微博相同计算规则）</h3>
        <h3 class="alert alert-success">1.中文、中文标点算1个字符</h3>
        <h3 class="alert alert-success">2.英文、英文标点、数字、符号算0.5个字符</h3>
        <h3 class="alert alert-success">3.未满1的向上取整</h3>
        <div>
        <div id="textarea_box">
             <textarea id="content" name="content" class="toolarea" cols="70px" rows="10">
快速计算字数和字符数的小工具（和新浪微博相同计算规则）
1.中文、中文标点算1个字符
2.英文、英文标点、数字、符号算0.5个字符
3.未满1的向上取整</textarea>
<p id="text_count_p"><span style="color:red" id="aaa"></span></p>
        </div>
        </div>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <script src="statistical_word_number.js"></script>
        <script>
            //依次传入要计算的textarea的id,要输出字数统计的span的id,和字数限制数
            startMonitor('content', 'aaa',300);
        </script>
    </body>
</html>

textarea字数实时统计方案

相关推荐