maxlength仅拦输入不防粘贴和中文上屏延迟，需监听input事件截断并后端二次校验；textarea粘贴超长或ime组词时“失效”因原生限制覆盖不全，初始化超限内容须手动截断，富文本场景需改用其api。
maxlength 属性能直接生效，但仅拦输入、不防粘贴和中文输入法上屏延迟，必须配合 input 事件监听与后端二次校验。
textarea 的 maxlength 为什么有时“失效”
常见现象是用户粘贴超长文本后仍能提交，或中文输入法选词时突然超限。根本原因有三个：
-
maxlength只约束浏览器原生输入行为（按键、部分粘贴），但无法拦截右键粘贴、拖放文本、语音输入、IME 组词未上屏等场景 - 服务端返回的初始值已超限，
maxlength不会自动截断已有内容，只拦新增 - 用了富文本组件（如 Quill、Tiptap）包裹
textarea，真实输入发生在隐藏 DOM 中，原生属性完全失效
解决方法：初始化时手动截断，例如 textarea.value = textarea.value.slice(0, 200)；富文本场景改用其内置字数 API。
如何用 JavaScript 补全实时校验逻辑
只靠 maxlength 不够，需监听 input 事件做兜底。关键点不是“阻止”，而是“同步反馈+安全截断”：
- 监听
input，而非keydown或keyup—— 后两者捕获不到粘贴、拖入、语音输入 - 计算长度优先用
Array.from(text).length，比text.length更准（避免代理对如 ?? 被误算为 2 字） - 截断时用
el.value = el.value.slice(0, limit)，别用正则替换，否则可能破坏 emoji 或中文 - 移动端需额外监听
compositionend，防止输入法组合阶段统计滞后
示例片段：
const textarea = document.getElementById('desc');
const MAX = 200;
textarea.addEventListener('input', () => {
const len = Array.from(textarea.value).length;
if (len > MAX) {
textarea.value = textarea.value.slice(0, MAX);
textarea.setSelectionRange(MAX, MAX); // 防光标跳到开头
}
});
后端校验为什么不能省
前端所有限制都可被绕过：maxlength 能被 DevTools 直接删掉，JS 校验能被禁用，curl 请求根本不会走前端逻辑。所以：
- PHP 必须用
mb_strlen($str, 'UTF-8')，不是strlen() - Node.js 用
text.length够用，但极少数代理对需 fallback 到Array.from(text).length - MySQL 的
VARCHAR(255)是按字符计，但字段定义要留余量（比如前端限 200，后端设 255），防编码转换或特殊符号导致意外截断
真正容易被忽略的是：中文输入法在组词阶段不触发 input，用户看到“还剩 3 字”，实际敲回车后瞬间变成“超 2 字”——这个临界体验崩坏，只能靠前端留 1–2 字余量 + 后端刚性拒绝来兜住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
