maxlength仅对text、search、url、tel、email、password和textarea生效；按Unicode码点计数，非UTF-16单元；粘贴等操作可绕过，需JS监听input事件并用Array.from截断；后端校验须与前端一致。
maxlength 属性能限制用户在 <input> 和 <textarea> 中输入的字符数，但它不是“万能开关”——用错类型、忽略粘贴绕过、混淆计数逻辑，都会让限制失效。
哪些 input type 支持 maxlength？
只对语义上表示「字符串输入」的类型生效：
-
type="text"、"search"、"url"、"tel"、"email"、"password"✅ -
type="number"、"date"、"range"、"checkbox"❌（浏览器直接忽略，不报错也不拦截） -
<textarea>✅（唯一支持多行文本的原生方案）
常见错误：<input type="number" maxlength="3"> 看似写了，实际完全没用。应改用 max="999" + JavaScript 拦截非数字输入，或换回 type="text" 并监听 input 事件。
maxlength 的字符数到底是怎么算的？
它按 Unicode 码点（code point）计数，不是字节数，也不是“人眼看到的字数”，但和大多数用户直觉基本一致：
立即学习“前端免费学习笔记（深入）”；
- 英文、数字、常见标点、中文汉字：1 字符 = 1 码点 →
maxlength="10"可输 10 个汉字或 10 个字母 - emoji（如 ??、?）或生僻字：可能占 2–4 码点 → 同样
maxlength="10"下，可能只能输 2~3 个 emoji 就满额 - 组合字符（如 é、ñ）：通常 1 码点（预组合形式），但若用基础字母+变音符号拼成（如
e\u0301），则算 2 码点
这意味着：前端用 value.length 截断 ≠ maxlength 行为。JavaScript 的 .length 统计的是 UTF-16 编码单元（code unit），对代理对（surrogate pair）会返回 2；而 maxlength 在现代浏览器中已统一按码点计数（更准确）。若需严格按“用户可见字符”控制，必须用 Array.from(value).length。
为什么用户还能粘贴超长内容？
因为 maxlength 只拦截键盘输入和部分剪贴板操作（如 Chrome 对 Ctrl+V 的基础截断），但对以下行为无约束力：
- 右键粘贴（尤其是含 emoji 或长文本时）
- 拖放文本到输入框
- 通过 DevTools 直接赋值：
input.value = '超长字符串'
所以必须加一层 JS 防御：
const input = document.querySelector('input[maxlength]');
input.addEventListener('input', () => {
const max = parseInt(input.getAttribute('maxlength'));
const chars = Array.from(input.value); // 真实字符数
if (chars.length > max) {
input.value = chars.slice(0, max).join('');
}
});
注意：要监听 input 而非 change，且需配合 compositionstart/compositionend 处理中文输入法上屏逻辑，否则会打断拼音输入。
后端校验必须用相同逻辑
前端任何限制都可被绕过。后端若只用 str.length（Python/JS 默认）、len()（Python）、str.length()（Java）做校验，很可能和前端统计不一致：
- Python：用
len(list(str))或regex.findall(r'\X', str)（Unicode 字形簇） - Node.js：保持一致，用
Array.from(str).length - Java：用
str.codePointCount(0, str.length())，别用str.length() - 数据库字段（如 MySQL
VARCHAR(200)）按字节计，utf8mb4 下一个 emoji 占 4 字节 → 字段长度必须预留足够空间
最容易被忽略的一点：前端用 Array.from().slice() 截断，后端却用字节长度校验，数据库字段又按字符数定义宽度——三者不统一，用户在第 97 个字符就莫名被截，日志里还找不到原因。
