input事件是唯一能同时满足“准确”和“实时”的方案，它覆盖粘贴、拖入、输入法、语音、自动填充等全部编辑路径，且只在值真正改变后触发，避免拼音误算；value.length即真实字符数，无需trim或正则；用textcontent更新计数器、css class切换样式、setselectionrange恢复光标可避免卡顿与错位。
直接监听 input 事件，别碰 keyup 或 change —— 这是唯一能同时满足“准确”和“实时”的方案。
为什么 input 事件是唯一靠谱的选择
用户粘贴、拖入文本、用输入法选词、语音输入、自动填充……这些操作 keyup 全部捕获不到；change 只在失焦时触发，完全不是“实时”。而 input 在所有主流浏览器（包括 IE11）中对 textarea 和 input 都稳定支持，且只在值真正改变后触发——比如中文输入法确认上屏才计数，不会把拼音过程误算进去。
-
input覆盖全部编辑路径：键盘、粘贴（Ctrl+V / 右键）、剪切、拖放、IME、自动填充、甚至屏幕朗读输入 -
keyup会高频重复触发（长按字母键），且在中文输入法下提前触发，导致计数跳变或超限误判 -
change根本不适用于实时场景，用户写完看不到反馈，提交前才发现超限
value.length 就是真实字符数，别绕弯
HTML 表单元素的 value 属性返回的是最终字符串，value.length 返回的就是 UTF-16 编码单元数。对 ASCII、常用汉字、换行符 \n 来说，都是 1。不需要 trim()，不需要正则过滤空格或标点——除非业务明确要求“仅统计汉字+英文字母”，否则一切额外处理都会引入偏差。
-
\n算 1 个字符，\r\n在 Windows 下可能被存为 2 个，但value.length自动反映实际长度，无需手动归一化 - 不要用
textContent或innerText读取input/textarea的值——它们对表单控件无效 - 如果用了
maxlength属性，浏览器会自动截断，你只需更新显示数字，别再手动slice()，否则光标会乱跳
怎么避免卡顿和光标错位
高频 input 触发下，DOM 操作是主要瓶颈。每次输入都调用 innerHTML 或频繁修改样式，容易引发强制同步布局（layout thrashing）。更糟的是，手动截断内容却不重置光标位置，会导致用户继续输入时“跳字”或光标回到开头。
- 用
textContent更新计数器，比innerHTML轻量得多，无解析开销 - 若需超限时视觉提示（如变红），用 CSS class 切换，别 inline 写 style
- 必须截断时，用
setSelectionRange()手动恢复光标到合理位置（比如截断后末尾），否则用户无法继续自然输入 - 避免在事件回调里做复杂计算（如分词、去 HTML 标签）——那是提交校验的事，不是实时计数该干的
最常被忽略的一点：别在同一个元素上叠加多个事件监听器（比如同时绑 input、focus、keyup），既没必要，又难调试。一个干净的 addEventListener('input', handler) 就够了——它真能覆盖所有情况，只是很多人没信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
