页面加载时统计textarea字符数的技术实现求助

嘿，我来帮你搞定这个问题！你的核心需求是页面加载时就自动统计textarea里的默认文本长度对吧？现在的代码里，你的计数函数初始化时直接把最大长度设为计数器显示值，没有计算默认文本的剩余长度，而且重复绑定了oninput事件。我们来调整一下：

关键修改点 #

• 重构count_title和count_mdesc函数，让它们能同时完成初始化统计默认内容和输入时实时更新的逻辑
• 修正页面加载触发逻辑，确保DOM完全加载后自动执行统计
• 移除重复的事件绑定代码，避免逻辑冲突

修改后的完整代码 #

HTML部分（无需改动，保持原结构即可） #

<label for="titletag">Title</label><br>
<div class="wrap">
<textarea name="text" id="titletag" cols="100" rows="1">Default title (variable length).</textarea><span id="ctitle" class="counter"></span></div><br><br>
<label for="metadesc">Meta description</label><br>
<div class="wrap">
<textarea name="metadesc" cols="100" rows="5" id="metadesc">Default meta description (variable length).</textarea><span id="cmdesc" class="counter"></span></div>

JavaScript部分 #

// 标题计数函数：统一处理初始化和输入更新
function count_title() {
  const el_t = document.getElementById('titletag');
  const maxLength = 70;
  const el_c = document.getElementById('ctitle');
  
  // 抽离更新计数器的逻辑，复用代码
  function updateCounter() {
    const remaining = maxLength - el_t.value.length;
    el_c.innerHTML = remaining;
  }
  
  // 页面加载时先执行一次，统计默认内容
  updateCounter();
  // 绑定输入事件，实时更新
  el_t.addEventListener('input', updateCounter);
}

// 元描述计数函数，逻辑和标题一致
function count_mdesc() {
  const el_t = document.getElementById('metadesc');
  const maxLength = 320;
  const el_c = document.getElementById('cmdesc');
  
  function updateCounter() {
    const remaining = maxLength - el_t.value.length;
    el_c.innerHTML = remaining;
  }
  
  updateCounter();
  el_t.addEventListener('input', updateCounter);
}

// 页面加载完成后触发所有统计
window.addEventListener('load', function() {
  count_title();
  count_mdesc();
});

代码解释 #

1. 复用更新逻辑：把计数器更新的代码抽成内部函数updateCounter，这样初始化和输入事件都能调用同一段逻辑，避免重复代码
2. 页面加载触发：用window.addEventListener('load', ...)代替原来的window.onload（这种方式更灵活，不会覆盖其他已绑定的onload事件），确保DOM完全加载后再执行统计
3. 移除内联事件：删掉了HTML里的oninput属性，因为我们已经通过JS绑定了input事件，避免逻辑重复触发
4. 实时计算剩余长度：不管是默认内容还是用户输入的内容，都会计算maxLength - 输入内容长度，确保计数器显示的是真实剩余字符数

这样修改后，页面加载时就会自动统计textarea里的默认文本长度，用户输入时也能实时更新啦！

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