textarea中文字符计数不能用value.length，因其返回UTF-16码元数而非用户感知字符数；应使用Array.from(text).length准确统计Unicode字符，兼容中文、emoji及组合字符，并配合input和compositionend事件实时更新。
textarea 中文字符计数为什么不能直接用 value.length
因为 value.length 返回的是 UTF-16 码元个数，不是用户感知的“字符数”。一个中文汉字通常是 1，但某些 emoji（如 ??）或生僻字会占 2 个码元，"??".length 是 4，而用户只看到 1 个图形。同样，"\r\n" 在 Windows 下算 2，"\n" 算 1——这些都会让前端统计和后端（如 PHP mb_strlen($s, 'UTF-8') 或 Python len(s)）不一致。
常见错误现象：用户输入 50 个汉字 + 2 个 emoji，前端显示“52 字”，后端校验却说“54 字超限”，提交被拒。
- 不要用
value.trim().length，空格和换行符本就是有效内容，删了就失真 - 别依赖
keyup或change，它们漏粘贴、拖入、IME 上屏 - 兼容性兜底：IE11 支持
Array.from(str).length，IE9/10 需 polyfill 或改用正则str.match(/[\s\S]/gu)?.length || 0
如何用 Array.from() 实现准确的中文/emoji 字符计数
Array.from(text).length 是目前最简、最准、兼容性够用的方案。它按 Unicode 字符分割字符串，对中文、日文、韩文、组合 emoji（如 ?❤️?）、带声调字母（é）都返回符合直觉的数值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 监听
input和compositionend双事件，防 iOS Safari 或中文输入法上屏延迟 - 不要在回调里读
offsetHeight或getBoundingClientRect()，会触发强制同步布局卡顿 - 计数器 DOM 更新用
textContent，别用innerHTML或频繁重排的样式操作 - 示例代码片段：
const ta = document.querySelector('textarea[data-max="200"]');
const counter = document.querySelector('[data-counter]');
const MAX = parseInt(ta.dataset.max, 10);
<p>function updateCount() {
const charCount = Array.from(ta.value).length;
const remaining = MAX - charCount;
counter.textContent = remaining;
counter.className = remaining < 0 ? 'over' : '';
}</p><p>ta.addEventListener('input', updateCount);
ta.addEventListener('compositionend', updateCount);
updateCount(); // 初始渲染表格中嵌入 textarea 时的特殊处理点
HTML 表格本身不影响 textarea 的计数逻辑，但容易因结构引发两类问题：一是 CSS 布局导致计数器元素错位或重绘异常；二是多个 textarea 共用同一套 JS 逻辑时，querySelector 选错目标。
关键细节：
- 每个
textarea应有唯一data-id或与计数器通过id/for关联，避免表格行重复导致绑定错乱 - 不要把计数器放在
td外层（比如塞进tfoot），否则滚动或重排时易脱节 - 若表格支持动态增删行，每次新增后必须为新
textarea单独绑定事件，不能只靠事件委托（input不冒泡到table） - 富文本场景（如
contenteditable替代textarea）要另走路径：取el.innerText不可靠，应先用el.textContent再手动替换<br>为\n，再用Array.from()
超出限制后截断并保持光标位置的最小可行方案
仅设 maxlength 拦不住粘贴和 JS 赋值；仅 preventDefault() 在 input 里会破坏输入法体验。真正可用的做法是：检测超限 → 截断 → 手动恢复光标。
注意点：
- 必须在截断后立即调用
setSelectionRange()，否则光标跳到末尾，用户继续输入会覆盖中间内容 - 不要用
ta.value = ta.value.slice(0, MAX)后不触发事件——计数器不会更新，需手动dispatchEvent(new Event('input')) - 如果用户在中间位置插入超长文本（比如光标在第 100 位，粘贴 150 字），
slice(0, MAX)会粗暴丢弃后半段；更优解是保留光标前 + MAX - selectionStart 长度，但多数业务接受简单截断 - 服务端永远要做最终校验：
Array.from(req.body.text).length > 200，前端只是体验层
