是的，textarea 的 maxlength 属性限制 Unicode 码点数而非用户感知字符数，导致 emoji、中文组合字等被误截；需用 Array.from(value).length 校验真实字符数，并配合服务端 Unicode-aware 校验与足够宽的数据库字段。
textarea 的 maxlength 属性是否真的限制字符数？
是的，maxlength 在现代浏览器中对 <textarea> 有效，但行为和预期可能不一致——它按 Unicode 码点计数，不是按“用户感知的字符”或“显示宽度”算。比如输入一个 emoji（如 ??），它由多个码点组成（U+1F469 U+200D U+1F4BB），maxlength="1" 会直接拒绝输入，哪怕你只打算输一个“人像电脑”符号。
中文、emoji、代理对（surrogate pairs）下 maxlength 容易误判
JavaScript 中字符串长度（.length）和 HTML maxlength 都基于 UTF-16 码元计数，不是字数。这意味着：
-
""（单个 ??）在 JS 中.length === 4，maxlength="1"会拦掉它 - 中文基本字符（如
"好"）占 1 个码点，maxlength行为符合直觉 - 某些输入法组合字（如带声调的拼音输入结果）可能生成多码点序列，实际输入被截断的位置比显示光标位置更早
- 移动端软键盘常绕过
maxlength校验（尤其长按粘贴时），需额外用 JS 补防
如何让 maxlength 更贴近真实字数限制？
纯 HTML 无法解决码点 vs 字数差异，必须配合 JS。关键不是重写输入逻辑，而是拦截 + 修正：
- 监听
input事件，用Array.from(value).length获取真正“字符数”（ES2015+，正确处理 emoji 和组合字符） - 若超出目标字数，立即
el.value = Array.from(el.value).slice(0, limit).join('') - 避免用
el.value.length判断，它不可靠 - 注意：IE 不支持
Array.from，如需兼容，可用String.prototype.normalize().codePointAt()或引入 polyfill
const textarea = document.querySelector('textarea');
const MAX_CHAR_COUNT = 100;
textarea.addEventListener('input', () => {
const chars = Array.from(textarea.value);
if (chars.length > MAX_CHAR_COUNT) {
textarea.value = chars.slice(0, MAX_CHAR_COUNT).join('');
}
});
服务端必须校验，maxlength 只是前端体验优化
maxlength 完全可被绕过：禁用 JS、手动修改 DOM、curl 提交等。任何依赖它做数据约束的后端都会出问题。
立即学习“前端免费学习笔记（深入）”；
- 后端收到文本后，仍需用对应语言的 Unicode-aware 方法统计字符（如 Python 的
len(list(graphemes))或 JavaScript 的Array.from(str).length） - 数据库字段长度限制（如 MySQL
VARCHAR(200)）按字节而非字符，UTF8MB4 下一个 emoji 占 4 字节，要预留足够空间 - 别把
maxlength当安全边界，它只是减少无效提交和改善 UX 的一层薄纱
.length 截断、后端用字节长度校验、数据库没设足够宽——三者不统一，用户输到第 97 个字符就莫名被截，还查不出原因。 
