不能只靠maxlength，因其仅静默拦截超限输入、不提供剩余字数反馈，且对中文、emoji、换行符（如\r\n）等Unicode码点计数存在跨浏览器差异；必须配合input事件实时监听、动态更新计数器，并做服务端二次校验。
Textarea计数功能为什么不能只靠maxlength？
因为maxlength只限制输入长度，不显示剩余字数，用户无感知；而且中文、Emoji、换行符在不同浏览器里计算方式不一致（比如\r\n算1还是2个字符），直接用value.length容易出错。真实场景下需要动态更新、支持粘贴、兼容全角/半角、区分“字符数”和“字节数”（尤其对接后端接口时）。
用input事件监听+实时更新计数器
别用keyup——它捕获不到鼠标粘贴、拖拽插入、剪切板快捷键（如Ctrl+V）；input才是唯一能覆盖所有输入途径的事件。Bootstrap本身不提供计数逻辑，得自己加DOM操作。
- 给
<textarea>加id或class便于绑定，比如class="form-control js-textarea-counter" - 在旁边放一个
<small class="text-muted"></small>作为计数容器 - 监听
input事件，读取textarea.value，计算当前长度 - 推荐用
textarea.value.length统计Unicode字符数（ES6默认行为，对中文、Emoji友好） - 若需字节计数（例如后端限制UTF-8字节数），用
new TextEncoder().encode(value).length（注意IE不支持）
document.querySelectorAll('.js-textarea-counter').forEach(ta => {
const counter = ta.nextElementSibling;
ta.addEventListener('input', () => {
const len = ta.value.length;
const max = parseInt(ta.getAttribute('maxlength') || '0');
if (max > 0) {
counter.textContent = `${len}/${max}`;
ta.classList.toggle('is-overlimit', len > max);
}
});
});
如何让计数器样式适配Bootstrap 5/4？
Bootstrap默认没为计数器设计样式，容易和表单控件错位或颜色冲突。关键不是加新CSS类，而是复用现有工具类并控制层级。
- 把计数
<small>放在<div class="form-group">或<div class="mb-3">内部，紧贴<textarea>下方 - 用
text-end右对齐（Bootstrap 5）或text-right（Bootstrap 4） - 超限时加
text-danger，但别只改文字色——同时加border-danger到<textarea>更直观 - 避免用
position: absolute覆盖原生focus状态，否则键盘导航会跳过计数器
粘贴大段文本时卡顿怎么办？
用户一次粘贴几千字，input事件高频触发导致UI冻结。这不是Bootstrap的问题，是JS执行阻塞。
- 用
requestAnimationFrame做简单防抖：只在下一帧更新计数，不阻塞输入 - 对超长文本（比如>10000字符）跳过实时校验，只在失焦（
blur）时再检查一次 - 如果必须严格限制，提前用
ta.value = ta.value.slice(0, max)截断，但要注意光标位置重置问题（可用setSelectionRange修复） - 移动端Safari对
input事件响应慢，建议加touchend兜底
计数逻辑本身很简单，但真正难的是边界情况：全角空格、零宽字符、换行归一化、iOS输入法延迟提交……这些不会报错，但会让用户觉得“不准”。先跑通基础流程，再根据实际输入源逐步补漏。
