maxlength属性最简单可靠，但仅对text、search、url、tel、email、password和textarea生效；按Unicode码点计数，非UTF-16单元；粘贴可绕过，需JS监听input/paste事件并用Array.from截断；后端校验必不可少。
直接用 maxlength 属性是最简单、最可靠的方式。它由浏览器原生支持，能实时拦截超长输入和粘贴，无需 JavaScript 就可生效——但必须用对标签类型、理解它的计数逻辑，并配合后端校验。
哪些输入框能用 maxlength
只对语义上表示「文本输入」的类型起作用：
-
type="text"、"search"、"url"、"tel"、"email"、"password"✅ -
<textarea></textarea>✅（现代浏览器均支持，但旧版 Safari 可能忽略，建议 JS 双保险） -
type="number"、"date"、"range"、"checkbox"❌（浏览器完全忽略，写了也无效）
例如：<input type="number" maxlength="4"> 不会限制位数；应改用 type="text" + inputmode="numeric" + JS 拦截，或用 max="9999" 配合正则校验。
maxlength 怎么算“一个字符”
它按 Unicode 码点（code point）计数，不是字节数，也不是 JS 的 .length（后者统计 UTF-16 编码单元）。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 普通中文、英文、数字、标点：1 字符 = 1 码点 →
maxlength="10"可输 10 个汉字 - 部分 emoji（如 ??、?）或辅助平面生僻字：占 2–4 码点 → 同样
maxlength="10"下可能只能输 2~3 个就满额 - 组合字符（如 é 写成
e\u0301）：算 2 码点，而预组合形式\u00e9算 1 码点
若需严格按“人眼看到的一个字”限制（即 grapheme cluster），必须用 Array.from(value).length 或 Intl.Segmenter 配合 JS 截断。
怎么防绕过？粘贴和移动端要注意什么
用户右键粘贴、拖拽文本、或在 iOS/Android 软键盘上长按粘贴，都可能绕过 maxlength 的视觉拦截（尤其 Android）。补救方法：
- 监听
input和paste事件，粘贴时调用event.preventDefault() - 在事件处理中用
Array.from(value).slice(0, N)截断，再赋值回 input - 避免直接用
value.length判断，它对 emoji 可能误判；统一用Array.from(value).length - 移动端测试重点：iOS 键盘达上限后常禁用按键，Android 更依赖 JS 拦截
为什么后端校验绝对不能省
maxlength 是纯前端限制，用户可通过以下方式轻松绕过：
- 禁用浏览器 JavaScript 后手动修改 DOM
- 用 Postman、curl 或脚本直接调用接口
- 审查元素删掉
maxlength属性再提交
后端必须做等价校验：比如前端设 maxlength="5"，后端就要检查字段长度 ≤ 5 且匹配 /^\d{5}$/（如 ZIP Code），否则数据完整性无法保障。
