监听 input 事件实时统计 textarea 字数最可靠，覆盖粘贴等所有输入；用 addEventListener 绑定，区分字符数与字节数，HTML 预留 span 显示位置，JS 初始化并防 null，maxlength 做原生限制，辅以视觉提示和服务端校验。
textarea 输入时实时统计字数
直接监听 input 事件最可靠，比 keyup 或 change 更及时，能覆盖粘贴、拖入、自动补全等所有输入方式。
常见错误是绑定到 blur 或只监听键盘事件，导致粘贴文字后字数不更新。
- 用
addEventListener('input', handler)，不是oninput行内写法（不利于维护） - 注意区分「字符数」和「字节数」：中文、emoji 都算 1 个字符，
value.length就够用 - 空格、换行符都计入，如需过滤可加
.replace(/\s/g, '').length，但通常不需要
HTML 结构要预留统计显示位置
不能把字数硬写死在标签里，得用一个带 id 的 <span> 或 <small> 容器，方便 JS 动态更新。
示例结构简洁有效：
立即学习“前端免费学习笔记（深入）”；
<textarea id="content" placeholder="请输入内容..."></textarea> <p>当前字数：<span id="charCount">0</span>/200</p>
别用 <div> 包裹统计文字——语义不对，且容易被 CSS 意外撑开或换行。
JS 统计逻辑必须防空指针和初始状态
页面加载时就该显示初始字数（0），否则用户第一眼看到的是“空白”或旧值；同时要确保 DOM 元素存在再操作，否则报错 Cannot set property 'textContent' of null。
- 把 JS 放在
</body>前，或用DOMContentLoaded包一层 - 先查
document.getElementById('content')和document.getElementById('charCount')，任一为null就 return - 初始赋值写在监听器注册前，避免首次输入才刷新
限制输入长度时，maxlength 属性优先于 JS 截断
想卡死最多 200 字，直接给 <textarea maxlength="200">，浏览器原生拦截更稳定。不要靠 JS 在 input 里手动 substring —— 会破坏光标位置、粘贴体验差、移动端兼容问题多。
如果 UI 上需要「超限变红」这类提示，只需 JS 判断 value.length > 200 并切换 class，不要干预输入本身。
真正容易被忽略的是：iOS Safari 对 maxlength 在某些富文本场景下支持不一致，所以视觉提示 + 原生限制 + 提交时服务端二次校验，三层才稳妥。
