应使用 input 事件实现真正实时字数统计，因其覆盖键盘、粘贴、语音等所有输入方式；textarea 用 value.length，contenteditable 宜用 textcontent.replace(/\s+/g, ' ').trim().length；需注意中英文混排按字符长度即可，避免 innertext 多算换行符；缓存 dom 元素并避免高频重排以提升性能。
HTML 本身不能做字数统计，必须靠 JavaScript 实现；所谓“实时”，本质是监听输入事件并计算 value 或 textContent 长度，但要注意空格、换行、中文标点和富文本的差异。
监听哪个事件才真正“实时”？
用 input 事件，不是 keyup 或 change：
-
input覆盖所有输入方式（键盘、粘贴、拖入、语音、自动填充），keyup漏掉鼠标粘贴和 IME 输入 -
change只在失焦时触发，完全不满足“实时”要求 - 移动端软键盘回车、长按粘贴等操作，只有
input能稳定捕获
textarea 和 contenteditable 元素统计逻辑不同
textarea 直接取 element.value.length 即可；但 contenteditable 是 HTML 结构，需提取纯文本：
-
element.innerText会把换行转成空格，且受 CSSdisplay: none干扰 -
element.textContent更可靠，但会包含不可见的\n - 推荐写法：
element.textContent.replace(/\s+/g, ' ').trim().length（合并空白、去首尾）
中英文混排和用户真实感知的字数怎么对齐？
用户关心的是“写了几个字”，不是 JS 字符长度。常见偏差点：
- 中文标点（，。！？；：""''（）【】）占 1 个字符，但部分产品要求按“汉字计数规则”算作 1 字，无需额外处理
- 英文单词、数字、符号连写（如
hello123!）应整体视为 1 个“词”，但字数统计一般不拆词——直接用字符长度即可，除非明确要求“中文字符+英文单词数” - 避免用
.length统计innerText，它在含<br>
的contenteditable中会多算换行符 - 若需排除空格和换行：
text.replace(/[\r\n\t\s]+/g, '').length
性能隐患：高频触发下别反复 DOM 查询
每次 input 都查 DOM 更新统计数，容易卡顿，尤其在低配设备或长文编辑场景：
- 把统计显示元素（如
<span id="count"></span>）缓存为变量，不要每次document.getElementById('count') - 避免在回调里重复调用
getBoundingClientRect()或样式计算 - 超长内容（>10000 字）可加节流：
setTimeout延迟 100ms 更新，或用requestIdleCallback - 注意：节流后“实时性”下降，需权衡——多数场景直接更新更稳妥
最易被忽略的是 contenteditable 的光标位置重置问题：手动设置 textContent 会丢失焦点和光标，统计显示务必用 innerText 或仅更新独立 <span></span>，别动编辑区本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
