textarea字数统计应与textarea同处一个内并设display:block；监听input事件而非keyup；前后端字数计算逻辑需一致；提示文字需white-space:nowrap防截断。
textarea 字数统计要绑定在表格单元格内
表格里放 <textarea></textarea> 时，直接在下方加提示容易错位或被表格样式干扰。关键是把统计元素和 textarea 放在同一个 <td> 里，并用块级结构隔离样式影响。
<p>常见错误是把提示文字写在 <code><td> 外面，或者用 <code><br> 换行——这会导致响应式错乱、打印异常，且无法对齐。
- 把
<textarea></textarea>和统计<span></span>都包进同一个<td> <li>给统计元素加 <code>display: block（或用<div>），避免内联默认行为 <li>用 <code>font-size和color控制提示可读性，别依赖默认灰色 - 统一用
addEventListener('input', handler) - 不要用
oninput行内属性，不利于复用和解耦 - 如果要兼容 IE9+，
input事件可用，无需降级到propertychange - 保持前后端逻辑一致：如果后端用
str.replace(/\s+/g, ' ').trim().length，前端也该这么算 - 简单场景直接用
textarea.value.length即可，不用过度清洗 - 注意：全角字符（如中文、日文）在 JS 中占 1 个
length单位，无需特殊处理 - 给统计容器加
white-space: nowrap和overflow: visible - 避免在
<td> 上设 <code>text-overflow，改用textarea自身限制宽度 - 移动端需额外测试：iOS Safari 对
font-size: 12px下的span渲染有缩放偏差
监听 input 事件而非 keyup
input 事件能捕获粘贴、拖入、剪切板操作和输入法上屏后的最终值；keyup 会漏掉右键粘贴、Ctrl+V 异步插入、中文输入法未确认字符等场景。
实操中发现：Chrome 下用 keyup 统计中文时，常显示“已输入 0 字”，直到按空格或回车才更新——这就是没监听到输入法合成事件。
立即学习“前端免费学习笔记（深入）”；
统计逻辑必须过滤换行符和全角空格？看业务需求
是否算字数，取决于后端校验规则。很多系统要求「纯文本长度 ≤ 200」，但用户粘贴内容常带多余换行或全角空格，前端统计若不一致，会造成体验断层。
例如：用户看到“198/200”，粘贴完发现提交报错“超出200字符”——大概率是后端按 trim().length 或正则清洗后计算的。
表格列宽收缩时提示文字被截断怎么办
当 <td> 设置了 <code>width 或 max-width，又没给统计元素设 white-space: nowrap，就会出现“200/200”只显示成“200/2…”。
更隐蔽的问题是：某些 CSS 框架（如 Bootstrap 的 .table-sm）会给 td 加 text-overflow: ellipsis，会误伤提示文字。
最易被忽略的是 textarea 获焦时焦点样式遮挡提示文字——特别是用了 outline: none 又没补 box-shadow 的自定义聚焦态。建议留 2px 垂直间距，或用 margin-top 隔开，别指望默认行高撑开空间。
