页面加载时触发keyup计数函数，统计textarea默认文本的词数与字符数

你可以把统计逻辑抽成独立函数，既在keyup事件中调用，也在页面加载完成后主动执行一次，就能统计默认文本的内容了。

修改后的完整代码： #

<p> Words <span id="count1">0</span></p>
<p>Characters <span id="count2">0</span></p>
<textarea rows="5" id="mycounter">This is default text</textarea>

<script>
    $(document).ready(function () {
        // 抽离统计逻辑为独立函数
        function updateCounts() {
            var wcounts = 0;
            var ccounts = this.value.length; // 字符数直接取长度，无需额外判断

            const words = this.value.match(/\S+/g);
            if (words) {
                wcounts = words.length;
            }

            $('#count1').text(wcounts);
            $('#count2').text(ccounts);
        }

        // 绑定keyup事件
        $("#mycounter").on("keyup", updateCounts);
        // 页面加载完成后主动触发统计
        updateCounts.call($("#mycounter")[0]);
    });
</script>

关键说明： #

• 将统计逻辑封装成独立函数，避免代码重复，也方便重复调用
• 字符数直接通过this.value.length获取，空字符串时length为0，不需要额外判断
• 使用updateCounts.call($("#mycounter")[0])在页面加载时主动执行函数，通过call让函数内部的this指向textarea元素，和keyup事件触发时的上下文保持一致
• 也可以用$("#mycounter").trigger("keyup")替代主动调用函数的写法，同样能触发初始化统计

内容的提问来源于stack exchange，提问作者Ali Raza