直接用input事件监听+value.length即可实现高效字数统计，需避开innertext、keyup和手动截断不重置光标三类错误；textarea应仅监听input事件，因其支持粘贴、语音输入等全场景，且ie9+及现代移动端均兼容。
直接用 input 事件监听 + value.length 就能搞定绝大多数文章字数统计需求，不需要额外库、不依赖框架，但必须避开 innerText、keyup 和手动截断不重置光标这三类高频错误。
textarea 字数统计该监听哪个事件
只用 input，别碰 keyup 或 change。前者漏掉粘贴、拖入、语音输入、自动填充；后者只在失焦时触发，完全不是“实时”。input 是 HTML5 标准事件，IE9+、所有现代移动端浏览器都支持。
- 常见错误现象：
keyup下用户右键粘贴后字数卡住不变；change下用户打完 100 字却看不到“已超限”提示 - 中文输入法场景下，
input会在拼音确认上屏后才触发，天然规避未完成输入的误统计 - 不需要额外监听
compositionstart/compositionend——除非业务要求极严苛的中间态感知，否则徒增复杂度且易出错
contenteditable 元素怎么取真实字数
textContent 是唯一可靠入口，但不能直接 .length ——它会把换行、多个空格、 都算进去，而用户只关心“看起来写了几个字”。
- 推荐写法：
element.textContent.replace(/[\r\n\t\s]+/g, ' ').trim().length，先合并空白再裁首尾 - 绝对不用
innerText：在 Chrome 中受 CSSdisplay: none干扰，iOS Safari 行为不一致，还会强制触发回流 - 如果内容含富文本（如从 Word 粘贴），
textContent已足够；别用innerHTML.replace(/]*>/g, '')，正则无法处理嵌套标签和注释，且性能差
字数超限时如何处理才不丢光标
禁止输入不现实，preventDefault() 在 input 里基本无效，尤其对 iOS 输入法。真正可行的是“截断 + 重置光标”。
- 核心逻辑：判断
el.value.length > MAX后，先保存el.selectionStart，再el.value = el.value.slice(0, MAX)，最后el.setSelectionRange(pos, pos) - 不这么做会怎样：用户在第 20 字位置粘贴一段 200 字文本，结果光标跳到末尾，继续输入就覆盖不到原位置
- 移动端兼容注意：iOS Safari 对
setSelectionRange支持不稳定，可降级为仅高亮提示、不主动截断
emoji、中英文混排到底按什么算“1 字”
用户感知的“1 字” ≈ Unicode 码点（grapheme cluster），不是 JS 的 string.length（UTF-16 码元）。但绝大多数业务场景下，用 Array.from(str).length 就够了。
-
str.length对 ? 这类 emoji 返回 2，用户却只当 1 个字；Array.from(str).length返回 1，更贴近真实 - 不要用
str.split('').length，它和.length行为一致，无法解决 emoji 问题 - 若需极致准确（如出版级校验），可用
Intl.Segmenter，但 Chrome 85+/Safari 15.4+ 才支持，小项目没必要 - 空格、换行符、中文标点（，。！？）全部按 1 字计——除非产品文档明确要求“仅计汉字+英文字母”，否则过滤就是错的
最容易被忽略的不是技术选型，而是 DOM 更新和输入法状态的耦合：中文输入过程中 input 暂时不触发是正常现象，强行用 keydown 抢跑只会让统计更错；真正要盯紧的，是每次更新是否重复查 DOM、是否在回调里读取 offsetHeight 这类触发布局的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
