应使用 input 事件而非 keyup，因其能捕获粘贴、拖入、ime 输入等所有变化，且在移动端更可靠；推荐用 requestanimationframe 批量更新计数器，避免重绘卡顿，并允许输入超限但需视觉提示与服务端校验。
input 和 textarea 都要监听 keyup 还是 input？
用 input 事件，不是 keyup。前者能捕获所有输入变化（包括粘贴、剪切、拖入、自动填充、IME 输入），后者漏掉粘贴和中文输入法上屏瞬间。移动端尤其明显——keyup 在软键盘上可能根本不会触发。
实操建议：
-
input事件在<input type="text">和<textarea></textarea>上都可靠，无需额外判断类型 - 避免给多个字段重复绑定，可用事件委托：监听父容器，用
e.target判断是否为带data-count属性的表单控件 - 不要在
input里直接调用耗时逻辑（比如正则匹配全角字符），简单取.value.length即可满足多数场景
中文、英文、空格、换行怎么算“1个字”？
业务需求决定计数规则，没有标准答案。默认用 .length 是最常见且性能最好的做法，它按 UTF-16 编码单元计数：ASCII 字符占 1，大部分中文汉字也占 1（基本多文种平面内），但 emoji 或生僻字可能占 2。
如果明确要求“中文字符算 2，英文数字算 1”，才需要额外处理：
- 简单区分：
charCode （注意：不准确，部分全角符号也会被误判） - 更稳妥：用正则
/[\u4e00-\u9fa5]/匹配中文，再遍历统计——但对长文本（>10KB）会有明显卡顿 - 换行符
\n默认计入，如需排除，先.replace(/\r\n|\r|\n/g, '')再取长度
怎么防止频繁触发导致 DOM 重绘卡顿？
用户狂敲键盘时，input 事件可能每秒触发几十次，直接更新 innerText 会引发连续重排。不需要防抖（会导致反馈延迟），用 requestAnimationFrame 批量合并即可。
实操代码片段：
let pending = false;
function updateCount(el, counterEl) {
if (!pending) {
pending = true;
requestAnimationFrame(() => {
counterEl.innerText = el.value.length;
pending = false;
});
}
}
关键点：
- 不用
setTimeout或debounce(16)，requestAnimationFrame确保与屏幕刷新同步，响应更自然 - 每个输入框独立维护
pending状态，避免多个字段互相阻塞 - 如果计数器是
<span></span>且只更新文本，浏览器优化足够好；若含 class 切换或动画，需进一步节流
超出限制后是禁用输入还是视觉提示？
禁用输入（el.disabled = true）体验差——用户无法删减重输。正确做法是允许继续输入，但用样式和文案明确传达限制已破，并在提交前校验。
推荐组合：
- 实时更新计数器颜色：
counterEl.style.color = el.value.length > limit ? 'red' : '#666' - 超出时显示「
已超 <strong>2</strong> 字」，而不是「最多 100 字」——用户更关心“我多打了多少” - 提交时仍需服务端校验：前端限制可被绕过，
maxlength属性仅对input有效，对textarea不阻止粘贴超长内容
真正麻烦的是富文本编辑器或带格式粘贴的场景——那已经不属于纯 HTML 表单范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
