怎么用 input 实时统计字数
直接监听 input 事件最可靠，change 或 blur 都会漏掉中间输入过程。用户每按一个键、粘贴一段文字、甚至用输入法选词，input 事件都会触发——这是唯一能覆盖所有编辑场景的时机。
注意：别用 keydown，它不反映最终值（比如按住 Shift+1 输出“!”，keydown 拿到的是键码，不是字符；中文输入法未上屏前也会误统计）。
- 绑定事件时优先用
addEventListener，避免覆盖已有逻辑 - 读取字数统一用
inputElement.value.length，别用textContent或innerText（对input无效） - 如果输入框允许换行（
textarea），length同样适用，回车符算 1 个字符（\n）或 2 个（\r\n，取决于浏览器和系统，但统计本身无需区分）
为什么 maxlength 和字数统计要分开处理
maxlength 是原生限制，但它的计数逻辑和人眼看到的“字数”常常不一致：它按 UTF-16 码元计数，一个 emoji（如 ?）可能占 2 个码元，显示为 1 个字，却消耗 2 个长度；中文、英文字母、数字都算 1，这点倒是统一。
用户需要的是“还能输几个字”的实时反馈，不是“离浏览器截断还有几个码元”。所以字数统计必须独立实现，不能依赖 maxlength 的值做减法。
立即学习“前端免费学习笔记（深入）”；
- 把
maxlength当作硬上限，字数统计显示的是currentLength / maxLength - 若需按“汉字=2、英文=1”等复杂规则统计（如某些投稿系统），必须自己写逻辑，
length属性完全不够用 - 设置
maxlength后仍要监听input：因为用户可能删减内容后重新输入，统计值需动态更新
textarea 和普通 input 的统计有区别吗
没有本质区别。两者都用 value.length，都该监听 input 事件。唯一要注意的是：如果页面对 textarea 启用了自动高度伸缩（比如通过 scrollHeight 动态设 height），字数统计逻辑不要和高度计算耦合——它们是两个独立需求，混在一起容易互相干扰。
- 避免在
input回调里同时改style.height和更新统计文案，DOM 重排可能变慢 - 若用框架（如 Vue/React），确保字数状态更新不触发不必要的渲染（比如只更新
span而非整个表单） - 移动端 iOS Safari 对
textarea的input事件有时延迟（尤其配合输入法），可加防抖（setTimeout延迟 50ms）避免闪动，但别超过 100ms，否则感知明显卡顿
容易被忽略的边界情况
用户粘贴富文本（比如从 Word 复制带格式的文字）、拖拽文件进输入框、用语音输入、甚至禁用 JS 后的降级表现——这些都不是“异常”，而是真实发生的操作。
- 粘贴内容需过滤 HTML 标签？那得在
input触发后立刻用正则或textContent清洗，再算长度，否则<strong>hello</strong>会被算成 24 个字符 - 拖拽文件进
input或textarea会触发input事件，但value不变，此时长度不变，无需特殊处理 - 语音输入在 Chrome 中会连续触发多次
input，每次只增一两个字，正常响应即可，不用合并或节流 - 服务端永远要二次校验字数，前端统计只是体验优化，不可信
