应使用 input 事件监听 textarea 实时统计字数，配合 maxlength 属性基础限制，并在 input 中截断超长内容且手动触发事件更新计数；字节统计需用 textencoder 或遍历码点判断。
怎么给 <textarea></textarea> 加实时字数统计
直接在 <textarea></textarea> 旁边放一个只读 <span></span> 或 <output></output>，用 input 事件监听输入变化，取 textarea.value.length 就是当前字符数。别用 keyup —— 它捕获不到粘贴、拖入文本、IME 输入（比如中文拼音上屏）等操作，会漏统计。
常见错误是把计数逻辑写在 change 事件里，这个事件只在失焦时触发，完全不适合实时反馈。
示例关键代码：
<textarea id="note"></textarea><output id="count">0</output> / 200
<script>
const ta = document.getElementById('note');
const out = document.getElementById('count');
ta.addEventListener('input', () => {
out.textContent = ta.value.length;
});
</script>
限制最大长度并阻止超限输入
<textarea maxlength="200"></textarea> 在现代浏览器中有效，但只是“阻止键入”，不阻止粘贴超长内容，也不影响通过 JS 赋值。真要严控，得在 input 事件里截断：
- 检查
textarea.value.length > 200，如果是，立即执行textarea.value = textarea.value.slice(0, 200) - 截断后手动触发
input事件（textarea.dispatchEvent(new Event('input'))），否则计数器不会更新 - 注意：不要用
keydown+preventDefault()拦截，它会破坏 IME 输入体验，中文用户打字会卡顿或丢字
按「字节数」而非「字符数」计数（比如适配后端存储限制）
中文、emoji 等字符在 UTF-8 下占多个字节，而 .length 返回的是 Unicode 码点数。如果后端字段是 VARCHAR(500) CHARACTER SET utf8mb4，实际限制的是字节数。
简单估算可用 new TextEncoder().encode(str).length，但注意兼容性（IE 不支持）；更稳妥的做法是遍历字符串，对每个码点用 str.codePointAt(i) 判断是否大于 0xFFFF（即是否为 4 字节 emoji）：
function getUtf8ByteLength(str) {
let len = 0;
for (let i = 0; i
<p>这个函数比 <code>TextEncoder</code> 兼容老浏览器，且不依赖 polyfill。</p>
<h3>移动端软键盘弹出时计数器被遮挡怎么办</h3>
<p>这不是计数器本身的问题，而是布局问题。iOS Safari 和部分安卓 WebView 在软键盘弹出时不会自动滚动到聚焦的 <code><textarea></textarea></code>，导致底部计数器不可见。</p>
<p>解决方法很直接：</p>
- 确保
<textarea></textarea>和计数器容器有明确的position: relative，且父容器高度不固定（别设height: 100vh） - 在
focus事件里调用textarea.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - 避免给计数器加
position: fixed或绝对定位到底部——它会脱离文档流，在键盘弹出时失去参照
最易忽略的是：某些 UI 框架（如 Ionic、Cordova）会注入自己的键盘处理逻辑，覆盖原生行为，这时得查对应框架的 keyboard 插件配置，而不是硬改 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
