编辑表单输入框字符统计异常：初始值计数不显示的解决方法

问题原因 #

你的脚本只在keyup事件触发时才计算字符数，页面加载完成后不会自动执行统计逻辑，所以编辑页面加载旧内容后计数会一直显示0，直到用户手动输入才开始更新。

解决方案 #

把字符统计逻辑封装成独立函数，页面加载时主动调用一次完成初始化，同时保留事件监听实现实时更新：

修改后的完整脚本 #

var myText = document.getElementById("myText");
var wordCount = document.getElementById("wordCount");

// 封装字符统计逻辑为独立函数
function updateCharCount() {
    var characters = myText.value.split('');
    // 过滤空格后统计有效字符长度
    var validCount = characters.filter(item => item != ' ').length;
    wordCount.innerText = validCount;
}

// 页面加载完成后立即执行，初始化旧内容的字符计数
updateCharCount();

// 监听键盘输入事件，实时更新计数
myText.addEventListener("keyup", updateCharCount);

可选优化 #

如果需要覆盖粘贴、剪切等非键盘输入的内容变更场景，可以把keyup事件替换为input事件，它能响应所有输入框内容变化的操作：

// 替换keyup为input事件，适配更多内容变更场景
myText.addEventListener("input", updateCharCount);

修改后，页面加载时会自动计算并显示旧内容的字符数，用户后续修改内容时也能实时更新计数。

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