必须用 input 事件实现 textarea 实时字数统计，因其能覆盖粘贴、拖入、IME 上屏等所有值变更场景；keyup 仅响应物理按键且触发过早，导致统计滞后或失效；表格嵌套不影响逻辑，只需正确绑定事件到 textarea 本身。
textarea 的实时字数统计必须用 input 事件，不是 keyup 或 change；表格本身不参与统计，但若把 textarea 放在 <td> 里，只要 DOM 结构合法，统计逻辑完全不变。
<h3>为什么不能用 <code>keyup 监听 textarea 字数
用户粘贴文本、拖入内容、用语音输入、或中文输入法选词上屏时，keyup 根本不触发——它只响应物理按键，且在拼音未确认阶段就提前发出，导致 value 还是旧值，UI 显示滞后甚至跳变。iOS Safari 和安卓 Gboard 下尤其明显。
常见错误现象：textarea.value.length 在用户点选“你好”后突然从 0 变成 2，中间没过渡；或者右键粘贴 50 字，计数器纹丝不动。
-
input事件在所有主流浏览器（IE11+、Chrome、Firefox、Safari）中对textarea稳定支持 - 它只在值真正改变后触发，包括粘贴、拖入、IME 上屏、自动填充等全部路径
- 不需要监听
paste单独补漏——input已覆盖
textarea 放在 HTML 表格里会影响统计吗
不会。只要 textarea 是合法嵌套在 <td> 或 <code><th> 中，它的事件行为、<code>value 属性、DOM 接口和独立放置时完全一致。表格只是布局容器，不干涉表单控件的底层机制。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 误以为表格单元格需要额外绑定事件——其实只需给
textarea本身加addEventListener('input', ...) - 用
document.querySelector('table textarea')选错目标（比如匹配到多个），建议加id或class精准定位 - 表格设置了
border-collapse: collapse或overflow: hidden，导致textarea高度被截断，视觉上像“统计卡住”，实则是滚动/光标不可见
怎么算“真实字数”：用 value.length 还是 Array.from(value).length
多数场景直接用 textarea.value.length 就够了——它返回 UTF-16 码元个数，对 ASCII、常用汉字、换行符 \n 都是 1，符合用户直觉和后端校验习惯（如 MySQL utf8mb4 字节限制虽不同，但前端提示以服务端为准）。
只有当你业务明确要求“所见即所得”的视觉字数（例如微博式计数，?? 算 1 字而非 4），才需升级为 Array.from(text).length。
- 别用正则匹配 Unicode 字符做实时统计——性能差，且移动端易卡顿
- 空格、制表符
\t、换行符\n（Windows 的\r\n算 2）都应计入，这是用户实际占位的真实长度 - 避免在
input回调里调用innerText或innerHTML——前者触发重排，后者把标签当字符算
超限时如何安全截断并保持光标位置
仅靠 maxlength 属性不够：它不拦截粘贴、不处理 JS 动态赋值、也不修正初始超长值。必须手动截断，且不能破坏光标。
关键步骤：
- 初始化时检查：如果
textarea.value.length > 200，立即执行textarea.value = textarea.value.slice(0, 200) - 在
input回调中判断超限后，先保存当前光标位置：const pos = textarea.selectionStart - 截断：
textarea.value = textarea.value.slice(0, 200) - 恢复光标：
textarea.setSelectionRange(Math.min(pos, 200), Math.min(pos, 200)) - 不要用
focus()强行激活——可能打断用户操作流
最常被忽略的是：富文本编辑器（如 Quill、TinyMCE）包裹的 textarea，其原生 maxlength 完全失效，此时必须用编辑器提供的 API 控制字数，而不是操作底层 textarea 元素。
