textarea 的 maxlength 属性管用，但仅按 utf-16 code units 截断键盘输入，对粘贴、拖入、语音输入及中文输入法未上屏内容无效；emoji（如‍）算4字符，windows换行符\r\n算2字符；初始值超限、富文本编辑器隐藏dom输入、js动态修改value均会导致超限。

textarea 的 maxlength 属性到底管不管用？

管用，但只对「字符数」生效，且仅拦截键盘输入；粘贴、拖入、语音输入、中文输入法未上屏内容，它完全不拦。浏览器按 JavaScript 的 string.length（即 UTF-16 code units）计数，不是“人眼看到的字数”。

常见现象：用户粘贴一段文字后显示 205 字，光标还能移动；输入 emoji 如 ‍ 被算作 4 字；Windows 换行符 \r\n 算 2 字。

所以别指望它“视觉同步”——它是底层硬截断，不是 UI 反馈机制。

为什么写了 maxlength 还能输超？

三个高频原因：

• 服务端回填的初始值已超限，maxlength 不会自动截断已有内容
• 用了富文本编辑器（如 Quill、Tiptap），真实输入发生在隐藏 DOM 中，原生 maxlength 失效
• JS 动态修改了 textarea.value（比如自动补全、格式化），绕过了浏览器校验逻辑

解决办法很直接：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 初始化时手动截断：textarea.value = textarea.value.slice(0, 200)
• 富文本组件请改用其内置 API（如 Quill 的 editor.getLength() ）
• 避免在监听中反复赋值引发 input 循环（Chrome/Firefox 下可能卡死）

如何用 JavaScript 补全 maxlength 的缺口？

关键不是“替代”，而是“兜底+反馈”。必须监听 input（覆盖粘贴、删除、输入法上屏），而非 keydown（漏掉粘贴）。

实操要点：

• 同时监听 input 和 paste 事件，后者可提前阻止超长粘贴
• 中文输入法场景下，compositionstart/compositionend 期间暂不截断，等上屏后再校验
• 截断后要主动更新字数提示，用 Math.max(0, maxLength - value.length) 防负数
• 别只靠 .substring()，优先用 Array.from(value).slice(0, max).join('')，兼容 surrogate pair（如某些生僻汉字）

后端和数据库怎么配得上前端的 maxlength？

前端限制纯属体验优化，后端才是安全边界。但很多人在这三处不统一：

• 前端用 value.length 截断（Unicode 码点计数）
• 后端用字节长度校验（如 PHP strlen() 或 MySQL VARCHAR(200)）
• 数据库字段按字节设宽，UTF8MB4 下一个 emoji 占 4 字节，200 字符可能撑爆 200 字节字段

结果就是：用户输到第 198 个字符，提交失败，前端没报错，后端日志只写“data too long”，排查时才发现三者单位根本对不上。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！