maxlength属性能限制textarea字数但仅对键盘输入生效，无法拦截粘贴、拖入、IME未上屏等内容；需监听input事件手动截断并配合后端二次校验。
maxlength 属性能直接限制 textarea 字数，但仅对字符数生效，且无法拦截粘贴、拖入、IME 未上屏等操作——必须配合 input 事件监听和后端二次校验才算真正可控。
textarea 的 maxlength 属性为什么有时“没反应”
常见原因不是属性失效，而是写法或上下文出错：
- 拼写错误：
max-length、maxLen、maxlengths都无效，必须是maxlength（全小写、无连字符） - 加在了非表单元素上：比如给
div或span加maxlength，浏览器直接忽略 - 初始值已超限：服务端返回的
textarea内容长度为 210，而maxlength="200"不会自动截断已有内容，只约束新增输入 - 被富文本组件包裹：如 Quill、TinyMCE、WangEditor 等，真实编辑区是隐藏的
div[contenteditable]，原生maxlength完全不生效
如何用 JavaScript 补足 maxlength 的短板
input 事件是唯一能覆盖键盘、粘贴、拖放、语音、IME 上屏等所有输入渠道的监听点。仅靠 keydown 或 paste 单独监听，必然漏掉至少一种场景。
- 监听
input，而非keydown：textarea.addEventListener('input', handler) - 截断逻辑用
.slice(0, limit)，不要用正则替换，避免误删代理对（如 ?? 或 ??） - 若需保持光标位置（比如用户在中间修改），别直接赋值
value后调setSelectionRange——容易跳变；改用setRangeText()或先preventDefault()再重写 - 对粘贴内容做预检：在
paste事件中event.clipboardData.getData('text')拿原始文本，判断是否超限再决定是否preventDefault()
后端校验为什么不能省
前端限制纯属体验优化，攻击者删掉 maxlength 属性、禁用 JS、或用 curl 直接 POST，都能绕过所有前端逻辑。
- 数据库字段定义要留余量：前端设
maxlength="200"，MySQL 字段建议用VARCHAR(255)，避免因 emoji 代理对或编码转换导致意外截断 - 服务端必须重新计算字符长度：Python 用
len(text)（不是len(text.encode('utf-8'))），PHP 用mb_strlen($text, 'UTF-8')，Node.js 用text.length - 注意换行符差异：
\r\n在 Windows 下算 2 个字符，\n在 Linux/macOS 下算 1 个——前后端统一按text.length计，别混用字节长度
最易被忽略的是：**中文输入法在组词阶段（未上屏）可能临时超出 maxlength，iOS 表现稳定，部分安卓输入法（如 Gboard）会允许光标继续移动，直到用户确认上屏才触发截断——这时用户看到“已输 203 字”，但实际还没提交，得靠 input 事件兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
