如何修复HTML textarea的JavaScript剩余字符计数器？

问题分析 #

原代码存在几个关键问题：

• 仅监听keyup事件，无法捕获粘贴、拖拽输入等非键盘触发的内容变化
• 页面初始化时未显示初始剩余字符数
• 多余的length > maximumCharacters判断（textarea的maxlength属性已经会限制输入，无需额外拦截）

修复后的代码 #

HTML（无需修改，需确保已引入jQuery）

<div class="row mb-3">
        <label for="description" class="col-sm-2 col-form-label label">Description</label>
        <div class="col-sm-10">
          <textarea class="form-control form textarea" id="description" name="description" maxlength="160"></textarea><span id="remaining-characters"></span>
        </div>
      </div>

JavaScript

$(document).ready(function(){
  var maximumCharacters = 160;
  // 初始化显示剩余字符
  updateRemainingChars();

  // 监听input事件，覆盖所有内容变化场景
  $('#description').on('input', function(){
    updateRemainingChars();
  });

  // 提取更新逻辑为独立函数，提升复用性
  function updateRemainingChars(){
    var length = $('#description').val().length;
    var remaining = maximumCharacters - length;
    $("#remaining-characters").text("Remaining characters: " + remaining);
  }
})

关键修复点 #

• 替换keyup为input事件：能捕获键盘输入、粘贴、拖拽、语音输入等所有内容变更场景
• 新增初始化调用：页面加载完成后立即显示初始剩余字符数
• 提取更新逻辑为独立函数：代码更简洁，便于后续维护
• 移除无效的return false判断：textarea的maxlength属性已经会自动限制输入长度，无需额外拦截

额外注意事项 #

确保你的页面已经引入了jQuery库，比如在<head>或</body>前添加：

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

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