用 input 事件监听 value.length 可实现准确低延迟字数统计，因其在粘贴、输入法上屏等所有值变更后触发，而 keyup 在中文输入过程中 value 未更新易导致计数滞后。
直接用 input 或 textarea 的 input 事件监听 + value.length 就能实现准确、低延迟的字数统计，不需要轮询或第三方库。关键不是“怎么写”，而是“怎么避坑”——比如中英文混排、Emoji、全角空格、输入法组合状态下的计数漂移。
为什么 input 事件比 keyup 更可靠
input 事件在任何导致 value 变更的操作后触发（粘贴、拖入、语音输入、输入法上屏），而 keyup 在按键抬起时就触发，此时中文输入法可能还在编辑区，value 还没更新，导致计数滞后甚至为 0。
常见错误现象：console.log(e.target.value.length) 在拼音输入过程中反复输出 0 或旧值；用户按回车完成输入后，计数才跳变。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 始终监听
input事件，不要用change（只在失焦时触发）或keydown/keyup - 对
textarea和input[type="text"]都适用，无需区分 - 移动端 Safari 和 Android WebView 均支持
input事件，兼容性无顾虑
value.length 在中文和 Emoji 场景下会不准吗
会，但不是因为 JS 错了，而是你对“字数”的定义和浏览器底层字符串处理不一致。
JavaScript 字符串基于 UTF-16 编码，一个 Emoji（如 ?）可能是 1 个码点（length=1），也可能是 2 个代理对（length=2）；中文全角标点、日文平假名等同理。如果你的产品需求是“微信式字数”（一个 Emoji 算 1 字），那 value.length 多数情况刚好够用；如果需求是“数据库存储长度”或“短信计费长度”，就得用更精确的 Unicode 分割方案。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 普通表单校验、UI 提示，直接用
el.value.length完全足够，简洁且性能好 - 若需严格按 Unicode 字符计数（排除代理对干扰），可用
[...el.value].length（ES2015 扩展运算符），但注意 IE 不支持 - 避免使用正则匹配 Unicode 字符（如
/./ug），在长文本下性能明显下降
如何防止频繁触发影响性能或 UI 卡顿
用户狂敲键盘时，input 事件每秒可能触发 20+ 次，如果每次都在 DOM 中更新文字、做校验、调用函数，容易引发重排或主线程阻塞，尤其在低端安卓机上明显卡顿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
requestAnimationFrame节流：只在下一帧更新显示，不丢事件也不卡界面 - 避免在事件回调里直接操作多个 DOM 节点，把计数结果存在变量里，统一在 RAF 回调中批量更新
- 如果只是做超限提示（比如 >100 字标红），可加简单阈值判断：
if (current !== lastCount) { updateUI(); lastCount = current; }
简短示例：
const textarea = document.getElementById('desc');
let lastCount = 0;
function updateCounter() {
const current = textarea.value.length;
if (current !== lastCount) {
document.getElementById('counter').textContent = current;
lastCount = current;
}
}
textarea.addEventListener('input', () => {
requestAnimationFrame(updateCounter);
});
placeholder 里的文字要不要计入字数
不要。placeholder 是提示文案，不属于用户输入内容，DOM 中也完全不可见于 value 属性。有人误用 textContent 或 innerText 去读取 placeholder 文本并累加，这是典型逻辑错误。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只依赖
el.value，它天然排除 placeholder、value 属性初始值以外的所有干扰 - 如果需要“已输入字数 / 总限额”格式，限额必须显式声明（如
data-max="200"），不能从 placeholder 解析数字 - placeholder 内容变化（比如多语言切换）不会触发
input事件，也不影响计数逻辑
真正难的不是写几行代码，而是想清楚“这个‘字’到底指什么”——是视觉上一个方块？还是数据库里一个 UTF-8 字节？还是用户心理预期的“我打了几个字”。一旦定义模糊，后面所有优化都可能白忙。
