maxlength仅对text、search、url、tel、email、password及textarea有效；number等类型不支持，且无法阻止粘贴超长或中文输入法组合过程中的超限内容，需结合input事件与服务端校验。
maxlength 属性能限制输入框字数，但只对特定 type 有效，且不阻止粘贴或中文输入法组合过程中的超长内容——它只是浏览器原生的提交校验+基础截断机制。
哪些 input type 支持 maxlength
只有以下 type 才会真正响应 maxlength 属性：
-
text、search、url、tel、email、password -
textarea（换行符\n算 1 个字符）
常见错误现象：<input type="number" maxlength="3"> 完全无效，用户仍可输入 123456；浏览器静默忽略该属性，控制台无报错。
若必须用数字语义（如 ZIP 码含前导零），应改用 type="text" + inputmode="numeric" + pattern="\d{5}"，再配 maxlength="5"。
为什么粘贴后还能看到超长内容
maxlength 在现代浏览器中会对粘贴行为自动截断，但部分旧版 Android WebView（4.4 之前）或某些桌面端浏览器存在延迟：粘贴瞬间值暂未被截断，需等 input 事件触发后才修正。
更关键的是：它不拦截中文输入法的“组合过程”。例如用户在拼音输入法中敲出 zhongguo（未上屏），此时 value.length 仍是 0；按空格确认后才变为 "中国"，这时 maxlength 才起作用。
若需实时响应（比如显示剩余字数或强制截断），必须监听 input 事件，并加判断：
el.addEventListener('input', (e) => {
if (!e.isComposing && el.value.length > 10) {
el.value = el.value.slice(0, 10);
}
});
emoji 和生僻字会让 maxlength “不准”
maxlength 按 UTF-16 code units 计数，不是用户感知的“字符数”。一个 emoji 如 ?? 占 4 个 code units，maxlength="1" 会把它截成乱码。
常见影响场景：
- 用户名字段限制 12 字，用户输入
??你好→ 实际占 6 个 code units，但视觉上只算 3 个“字” - 数据库字段定义为
VARCHAR(32)（UTF-8 字节限制），而前端maxlength="32"对 emoji 可能存不下
若业务强依赖“图形符号数量”，不能只靠 maxlength。需用 JavaScript 配合 Intl.Segmenter 或正则 /\p{Extended_Pictographic}|\p{Emoji_Presentation}/u 做二次计数与截断。
服务端必须重新校验长度
用户禁用 JS、手动修改 DOM、用 curl 直接 POST，都能绕过 maxlength。它只是体验层约束。
后端校验要点：
- Node.js：
Buffer.byteLength(str, 'utf8')判断字节数（适配 MySQLVARCHAR） - Python：
len(str.encode('utf-8')) - Java：
str.getBytes(StandardCharsets.UTF_8).length
别把 maxlength="10" 当作数据契约——它连浏览器兼容性都做不到 100%，更别说语义一致性。
