如何在按下Tab、空格、删除及退格键时统计textarea字符数？

看起来你在统计textarea字符数的时候遇到了Tab键不被计入的问题，我先帮你梳理下现有代码里的几个坑，再给你一个完整的解决方案：

现有代码的核心问题 #

• ID拼写不一致：你的textarea id是myTextArae，但绑定paste事件时用的是myTextArea，这直接导致paste事件完全没生效
• Tab插入后未触发统计：你手动插入了\t字符，但没有同步调用统计逻辑，所以这个Tab字符不会被算进去
• 函数上下文与参数混乱：check函数的调用里that指向不明确，default是JS保留字不能当变量名，参数传递也有问题
• 事件监听不全：只监听了keydown和paste，像keyup（处理退格、删除）、input（处理自动输入、拖拽文本）这些事件没覆盖到，会导致部分操作的字符没被统计

完整修复方案 #

下面是调整后的代码，能准确统计包括Tab、空格、退格/删除操作在内的所有字符：

<textarea id="myTextArea"></textarea>
<!-- 可以加个显示统计数的元素 -->
<div>当前字符数：<span id="charCount">0</span></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function() {
  const $textarea = $("#myTextArea");
  const $charCount = $("#charCount");

  // 统计字符数的核心函数
  function updateCharCount() {
    // val()会获取textarea的所有内容，包括\t、空格、换行等
    const totalChars = $textarea.val().length;
    $charCount.text(totalChars);
  }

  // 处理Tab键插入（阻止默认的Tab切换行为）
  $textarea.on("keydown", function(e) {
    if (e.keyCode === 9) {
      e.preventDefault();
      const start = this.selectionStart;
      const end = this.selectionEnd;
      // 在选中位置插入Tab字符
      const currentVal = $textarea.val();
      $textarea.val(currentVal.substring(0, start) + "\t" + currentVal.substring(end));
      // 恢复光标位置
      this.selectionStart = this.selectionEnd = start + 1;
      // 插入后立即更新统计
      updateCharCount();
    }
  });

  // 监听所有会改变内容的事件
  $textarea.on("keyup paste input", function() {
    // paste事件用setTimeout确保内容已粘贴完成
    setTimeout(updateCharCount, 10);
  });

  // 初始化统计
  updateCharCount();
});
</script>

关键说明 #

1. 统一ID：把textarea的ID改成myTextArea，确保所有事件绑定都能找到元素
2. 全事件覆盖：监听keydown（处理Tab插入）、keyup（处理退格、删除等按键释放后的内容变化）、paste（处理粘贴）、input（处理所有内容变更，包括拖拽文本、自动补全等）
3. 实时统计：每次内容变化后立即调用updateCharCount，val().length会准确计算所有字符的长度，包括\t、空格、换行这些空白字符
4. Tab处理优化：插入Tab后直接触发统计，同时阻止了默认的Tab切换行为，确保Tab字符能正确留在textarea里

你可以测试下：输入Tab、空格，按退格删除字符，粘贴文本，统计数都会实时更新，所有字符都会被正确计入。

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