如何在不使用maxLength的情况下实现类Twitter的255字符计数显示？

以下是修正并完善后的代码，完全满足你的需求：

<html>
<head>
<script>
// 页面加载完成后初始化剩余字符数显示
window.onload = function() {
  updateCharCount();
};

function updateCharCount() { 
  // 获取目标textarea元素和输入内容
  const commentInput = document.getElementById("comments");
  const currentContent = commentInput.value;
  const maxLimit = 255;
  
  // 计算当前内容长度与剩余字符数
  let currentLength = currentContent.length;
  let remainingChars = maxLimit - currentLength;
  
  // 处理超出字符的情况：截取前255个字符，强制剩余数为0
  if (remainingChars < 0) {
    commentInput.value = currentContent.substring(0, maxLimit);
    remainingChars = 0;
  }
  
  // 更新页面上的剩余字符数显示
  document.getElementById("numleft").textContent = remainingChars;
}    
</script>    
</head>
<body>
<form action="" method="post">    
  <input type="text" name="fullname" id="fullname" placeholder="fullname"><span class="err"></span><br>
  <div id="showcomment">You have <span id="numleft"></span> characters of your 255 left!</div>        
  <!-- 用input事件覆盖所有内容变更场景（键盘输入、粘贴等） -->
  <textarea id="comments" onInput="updateCharCount()"></textarea>  
  <input type="submit" name="submit" value="Enter"> 
</form>
</body>    
</html>

关键实现说明 #

• 修正元素获取错误：原代码错误指向了不存在的showComment元素，改为正确获取ID为comments的textarea，并通过value属性获取输入内容的长度
• 事件逻辑优化：使用onInput替代onKeyUp，覆盖鼠标粘贴、右键菜单粘贴等非键盘输入场景，确保计数实时更新
• 超出限制处理：当内容长度超过255时，用substring(0, 255)截取前255个字符，同时强制剩余字符数显示为0，完全符合需求
• 初始化显示：通过window.onload在页面加载完成后立即显示初始剩余字符数（255），避免页面加载后数字为空的问题
• 无maxLength依赖：全程通过JS逻辑控制字符数量，未使用textarea的maxLength属性

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