textarea的maxlength并未失效，它仅限制键盘输入，不拦截粘贴、拖入、语音输入及中文输入法未上屏内容；需监听input、paste和compositionend事件并手动截断，且前后端字符计数逻辑必须一致。
textarea的maxlength为什么看起来“失效”
它没失效，只是只管键盘按键，不管粘贴、拖入、语音输入和中文输入法未上屏状态。用户 Ctrl+V 一段 500 字文本，maxlength 不拦；用搜狗打“wo shi”，候选区显示“我是”，但 value 还是空的，maxlength 也不触发——直到按空格确认，“我是”才真正写入 value，此时才做长度判断。
常见假“失效”场景包括：
- 服务端返回的初始值已超限，
maxlength不会自动截断已有内容 - 用了 TinyMCE、Quill 等富文本组件，真实输入发生在隐藏 DOM 中，原生
textarea的maxlength完全不生效 - JS 动态修改了
textarea.value（比如自动补全、格式化），绕过了浏览器的拦截逻辑
必须监听 input 和 paste 事件补位
仅靠 maxlength 属性远远不够。要真正控制输入，得用 JS 主动截断，并覆盖所有写入路径：
- 监听
input事件：覆盖键盘输入、删除、回车、IME 上屏等绝大多数场景 - 监听
paste事件：调用event.preventDefault()阻止默认粘贴，再手动读取剪贴板内容并截断 - 避免只监听
keydown：它捕获不到粘贴、拖拽、语音输入 - 截断必须用
String.prototype.slice(0, N)：不用substr或正则，防止代理对（如 emoji）被错误切开
示例：
const textarea = document.querySelector('textarea');
const MAX_LEN = 200;
<p>function truncate() {
if (textarea.value.length > MAX_LEN) {
textarea.value = textarea.value.slice(0, MAX_LEN);
}
}</p><p>textarea.addEventListener('input', truncate);
textarea.addEventListener('paste', (e) => {
e.preventDefault();
const text = (e.clipboardData || window.clipboardData).getData('text');
const truncated = text.slice(0, MAX_LEN - textarea.value.length);
document.execCommand('insertText', false, truncated);
});</p>
中文输入法下要加 compositionend 监听
拼音输入过程中，input 事件不会触发，maxlength 更无从谈起。用户可能已敲几十个字母，却只看到一个光标——直到按空格，value 突然跳变，此时才该检查。
- 监听
compositionstart和compositionend，在组合结束时再执行截断 - 可结合
event.isComposing判断当前是否处于输入法组合中，避免中途误截 - 移动端 WebView（尤其旧版 iOS Safari）
input触发不稳定，compositionend是更可靠的兜底
建议写法：
textarea.addEventListener('compositionend', () => {
if (textarea.value.length > MAX_LEN) {
textarea.value = textarea.value.slice(0, MAX_LEN);
}
});
服务端校验必须同步 Unicode 字符数
前端所有限制都可被绕过：curl 提交、禁用 JS、DevTools 修改 DOM……后端才是最后一道防线。
- 不要用字节长度（如 MySQL
VARCHAR(200)）直接对应前端maxlength="200"：UTF8MB4 下一个 ?? 占 4 字节，但只算 1 个字符 - 后端统计必须用语言原生的 Unicode-aware 方法：Python 用
len(list(graphemes(text)))或len(list(unicodedata.normalize('NFC', text)))，JS 用Array.from(str).length - 数据库字段长度要预留余量，比如前端限制 200 字，MySQL 字段至少设为
VARCHAR(800)（按最大 4 字节/字符估算） - 前后端字符计数逻辑必须一致，否则用户输到第 198 个字就莫名被截，查不出原因
真正难的不是写几行 slice，而是输入法状态同步、光标位置保持、代理对安全截断、以及前后端字符单位对齐——漏掉任意一环，用户就会遇到“删不掉最后一个字”或“提示已超限但还能输”的问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
