textarea字符计数器页面加载未统计已有内容的技术咨询

我明白你的困扰——页面加载时计数器没识别到textarea里的预设内容，只在用户按键后才更新。其实只要把字符统计的逻辑封装成可复用的函数，在页面加载时主动调用一次就行，具体修改方案如下：

优化后的代码 #

window.onload = function() {
  var text_max = 200;
  
  // 把字符统计逻辑抽成独立函数，方便复用
  function updateCharacterCount() {
    var text_length = $('#text').val().length;
    $('#count_message').html(text_length + ' / ' + text_max);
  }

  // 页面加载完成后立即执行一次，统计预设内容的字符数
  updateCharacterCount();

  // 用户按键时更新计数
  $('#text').keyup(updateCharacterCount);
}

为什么这样改？ #

原来的脚本只在keyup事件触发时才计算字符数，但页面加载完成后并没有主动执行统计逻辑，所以初始显示的是0 / 200。现在我们把统计逻辑封装成updateCharacterCount函数，既可以在页面加载时调用，也能在按键时复用，完美解决了初始计数不准确的问题。

额外优化：支持更多内容修改场景 #

如果想让计数器在用户通过粘贴、剪切、右键菜单修改等非按键操作时也能实时更新，可以把keyup事件换成更通用的input事件：

$('#text').on('input', updateCharacterCount);

这样不管用户用什么方式修改textarea内容，计数器都会同步更新，体验更流畅。

内容的提问来源于stack exchange，提问作者Július Ľuptovec