maxlength属性直接限制输入框字符数，按UTF-16码元计数，对中文通常准确但遇emoji等辅助平面字符可能截断，需JS增强校验且服务端必须重新校验。
用 maxlength 属性直接限制文本输入长度
HTML5 中限定输入框字符数最直接的方式就是 maxlength 属性，它适用于 <input type="text">、<input type="password">、<input type="search"> 和 <textarea></textarea> 元素。
浏览器会自动截断超出长度的输入，并阻止用户继续键入——但注意：它只限制**字符串长度（UTF-16 code units）**，不是字节数，也不区分中英文。
-
maxlength="10"表示最多允许 10 个 UTF-16 单元；一个中文汉字通常占 1 个单元（基本多文种平面内），所以一般等效于“10 个字符” - 该属性对
<input type="number">无效（数字输入不按字符计数） - 服务端仍需校验，因为前端限制可被绕过（如禁用 JS 后手动修改 DOM 或发 POST 请求）
<input type="text" maxlength="20" placeholder="最多输入 20 个字符"> <textarea maxlength="100"></textarea>
为什么 maxlength 对中文输入有时“不准”
绝大多数情况下 maxlength 对中文是准确的，但遇到某些生僻汉字、emoji 或组合符号时可能表现异常——因为它们属于 Unicode 辅助平面（U+10000 以上），在 JavaScript 和部分浏览器中会被表示为两个 UTF-16 code units（即“代理对”）。
例如："??"（程序员 emoji）实际占 4 个 code units（2 个代理对），maxlength="1" 就会把它截成半个 emoji，显示为乱码或方块。
立即学习“前端免费学习笔记（深入）”；
- 这不是 bug，而是 HTML 规范按 UTF-16 计数的明确行为
- 若业务要求严格按“用户感知的字符数”（grapheme cluster）限制，必须配合 JavaScript 拦截 +
Intl.Segmenter或正则/\p{Extended_Pictographic}|\p{Emoji_Presentation}/u做增强校验 - 简单场景下可忽略，但金融、证件类表单建议额外做后端字符归一化校验
配合 JavaScript 动态控制输入长度的常见做法
单纯靠 maxlength 不足以覆盖粘贴（paste）、拖入（drop）、IME 输入完成前的中间状态等场景。需要监听事件做补充控制。
- 监听
input事件比keydown更可靠（覆盖粘贴、右键粘贴、语音输入等） - 对
<textarea></textarea>，需注意换行符 - 避免在事件中直接改
value后再setSelectionRange，容易引发光标跳变；推荐用el.setRangeText()或先preventDefault()再重写
const input = document.querySelector('input[maxlength]');
input.addEventListener('input', () => {
const max = parseInt(input.getAttribute('maxlength'));
if (input.value.length > max) {
input.value = input.value.slice(0, max);
}
});
服务端必须重新校验长度的原因
前端 maxlength 是纯 UI 层约束，无法防止以下情况：
- 用户禁用 JavaScript 后直接提交超长数据
- 用 curl / Postman 手动构造请求绕过表单
- 通过浏览器开发者工具临时删掉
maxlength属性 - 某些代理或 CDN 对请求体做了编码转换（如 GBK → UTF-8），导致字节膨胀
后端校验要基于真实解码后的字符串长度，而不是原始字节流。比如 Python Flask 中应使用 len(request.form.get('name', ''))，而非 len(request.get_data())。
真正容易被忽略的是：数据库字段长度限制（如 MySQL 的 VARCHAR(50)）和应用层校验不一致时，会导致截断静默失败或报错，必须对齐。
