maxlength仅约束键盘输入，对粘贴、js赋值、中文输入法未上屏、拖入及初始超长内容均无效；需结合input事件实时截断、composition事件处理输入法、服务端同口径校验三层防护。
maxlength 属性能起作用，但只拦得住键盘输入，粘贴、JS 赋值、中文输入法未上屏、拖入文本全都能绕过。它不是“字数防火墙”，只是浏览器底层的一道轻量闸门。
为什么 maxlength 有时形同虚设
根本原因在于：它只约束「用户按键触发的新增字符」，不介入 DOM 层级的值变更。一旦值通过其他路径写入（比如 textarea.value = 'xxx'），浏览器就不管了。
- 粘贴时，部分浏览器（如旧版 Safari、微信 WebView）不会自动截断超长内容
- Vue/React 中直接修改响应式数据（如
form.desc = longStr）完全跳过maxlength - 中文输入法在
compositionstart到compositionend之间，input事件暂不触发，此时赋值也不会被拦截 - 服务端返回的初始值若已超限，
maxlength不会帮你截断——它只管“往后加”
必须监听 input 事件做实时兜底
input 是唯一能覆盖所有输入来源的事件：键盘、粘贴、拖入、语音、IME 上屏、自动填充。比 keyup 或 keydown 可靠得多。
- 每次触发时检查
textarea.value.length > maxLength，超了就立即textarea.value = textarea.value.slice(0, maxLength) - 避免用
textContent或innerHTML赋值，它们可能破坏光标位置或触发额外渲染 - 如果用了中文输入法，建议同时监听
compositionstart和compositionend：前者标记“正在组词”，后者再执行一次校验，防止短暂越界 - 注意不要在截断后立刻触发新
input（某些 Chrome 版本会循环），可用setTimeout(() => {}, 0)或requestAnimationFrame延迟更新
服务端校验不是可选项，是必选项
前端限制可以被禁用、绕过、篡改。只要请求发出去，后端就必须按相同规则（string.length）重新校验，并拒绝超限提交。
- 前后端对“长度”的定义必须一致：都按 JavaScript 的
.length（即 UTF-16 code units）计数，而非视觉字数或字节数 - 特别注意 emoji（如
??占 4 个 code unit）、生僻汉字（代理对）、换行符（\r\n算 2 字） - 若数据库字段是
VARCHAR(500)，且用的是 utf8mb4 编码，那它实际最多存 500 个 code unit —— 和前端校验口径对齐，否则会出现“前端没报错，后端却存失败”
别忽略初始化和富文本场景
很多 bug 出现在页面加载那一刻，而不是用户操作之后。
- 服务端返回的
form.description若已有 520 字，前端仅靠maxlength和input监听是无效的——得在挂载时主动截断：textarea.value = textarea.value.slice(0, maxLength) - 用了
Quill、TinyMCE或 Vue 的v-model封装组件？原生textarea已被隐藏，maxlength完全失效。必须改用编辑器自身的 API（如quill.clipboard.dangerouslyPasteHTML()配合长度判断）或监听其text-change事件 - 若用 CSS 自适应高度（
scrollHeight），记得同步处理截断逻辑，否则高度计算会滞后一帧，出现“文字被截但框还没缩回去”的错位
真正可靠的限制，是三层叠加：HTML maxlength（基础拦截） + JS input 实时校验（运行时兜底） + 后端同口径强校验（最终防线）。少一层，就多一个被绕过的入口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
