textarea字数实时统计方案

淩亂°似流年 2022-01-26 17:55 426阅读 0赞

**最近找了一个通过js实时显示textarea字数统计的方法，稍加修改使它变得更加易用，下面是效果。拉伸和缩小不会影响统计显示。提供了两种计算字数方式。**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 1]

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

*  下面是使用方法,使用非常简单，只需要引入js，在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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70]: /images/20220126/8677f2c60e264073ac4befbec044acd4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L05ld19ZYW8_size_16_color_FFFFFF_t_70 1]: /images/20220126/2cd431ffe7334c5e9f32ebde3369be38.png