textarea 的 maxlength 属性在现代浏览器中可直接使用并真正阻止超限输入，但 IE 10/11 和旧版 Safari 不支持原生限制，需用 input 事件监听 + slice 截断 + setSelectionRange 重置光标来补位，且必须配合服务端校验。
textarea 的 maxlength 属性能直接用，但要注意浏览器兼容性
现代浏览器（Chrome 54+、Firefox 63+、Safari 10.1+、Edge 79+）都支持 maxlength 用于 textarea，它会真正阻止用户输入超出限制的字符——不只是视觉截断。但 IE 10/11 和旧版 Safari 不支持该属性对 textarea 的原生限制（IE 完全忽略，旧 Safari 只在表单提交时校验，不阻止输入）。
如果你的目标用户仍需兼容 IE 或 iOS 9 以下系统，不能只依赖 maxlength，得加 JS 补位。
用 JavaScript 补齐 maxlength 的兼容性缺口
核心思路是监听 input 事件（比 keydown 更可靠，覆盖粘贴、拖入、IME 输入等场景），实时截断超长内容。注意：不要用 onkeypress 或只监听 keydown，它们无法捕获右键粘贴或中文输入法未上屏的字符。
- 用
element.value.length计算当前字符数（注意：中文、emoji、换行符均算 1 个字符；如需按字节限制，需另做处理） - 截断逻辑建议写成
element.value = element.value.slice(0, maxLength)，而非substring，避免负索引异常 - 触发截断后，手动将光标重置到末尾（否则光标可能卡在中间）：
element.setSelectionRange(element.value.length, element.value.length)
const area = document.querySelector('textarea[maxlength]');
const maxLength = parseInt(area.getAttribute('maxlength'), 10);
area.addEventListener('input', () => {
if (area.value.length > maxLength) {
area.value = area.value.slice(0, maxLength);
area.setSelectionRange(maxLength, maxLength);
}
});
maxlength 值设多少？中英文混排和换行符怎么算
maxlength 统计的是 Unicode 码点数量（String.prototype.length），不是字节数。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 普通中文、英文、数字、标点、空格、制表符、换行符（
\n）各算 1 - 大部分 emoji（如 ❤️、??）是 2 个码点（含 ZWJ 或修饰符），会占 2 个长度
- 如果后端 API 要求「不超过 200 字节」，前端仅靠
maxlength="200"无法保证（中文 UTF-8 占 3 字节），此时必须后端校验，前端可额外用new TextEncoder().encode(str).length预估字节数（注意兼容性）
别忘了服务端校验，前端限制只是体验优化
所有前端限制（包括 maxlength 和 JS 截断）都可被绕过：禁用 JS、手动修改 DOM、用 curl/postman 提交。所以 maxlength 的本质是用户体验层的即时反馈，不是安全边界。
后端收到数据后，必须重新计算并截断或报错。例如 Node.js 中用 str.slice(0, 200)，Python 中用 s[:200]，且应明确告知前端“已自动截断”或返回 400 错误。
最容易被忽略的是：当用户粘贴一大段文本后快速连续按键，JS 截断可能滞后一两帧，导致短暂超限——这本身无害，只要后端稳守底线就行。
