maxlength仅截断键盘输入，对粘贴、拖拽、移动端组词等无效，需监听input事件手动截断；minlength=6与maxlength=6需配合required才强制6字符；number/date等type不支持maxlength，应改用min/max或JS校验；emoji混输时按UTF-16计数导致不准，推荐服务端最终校验。
maxlength 为什么有时候“拦不住”粘贴和移动端输入
因为 maxlength 是 UI 层的截断机制，不是事件拦截器：它只阻止键盘按键输入，但对 Ctrl+V 粘贴、拖拽插入、移动端输入法“组词未确认”阶段的临时超长内容不生效。粘贴后 input 事件仍会触发，此时 el.value.length 可能已大于 el.maxLength。
常见错误现象：<textarea maxlength="200"></textarea> 用户粘贴 300 字后没报错，表单照样能提交。
- 必须监听
input事件，手动截断：el.value = el.value.slice(0, el.maxLength) - 若需保留光标位置，得配合
el.setSelectionRange()重置 - 移动端 WebView（尤其 Android 4.4 之前）对
textarea的maxlength支持不稳定，建议加 JS 容错
minlength=6 和 maxlength=6 真的等于“必须输满 6 个字符”吗
是的，但有个关键前提：用户不能留空。因为 minlength 只在 value 非空时才参与校验——如果用户一个字不输，el.validity.tooShort 是 false，真正触发的是 valueMissing（由 required 控制）。
所以单独写 minlength="6" maxlength="6" 并不能阻止空提交；必须加上 required 才构成完整约束。
立即学习“前端免费学习笔记（深入）”；
-
<input type="text" minlength="6" maxlength="6">→ 允许空提交，也允许输 1~5 字（提交时报tooShort） -
<input type="text" minlength="6" maxlength="6" required>→ 空值报valueMissing，1~5 字报tooShort，只有恰好 6 字才通过 - 服务端仍需校验：前端所有限制都可被绕过，
required和minlength不改变 HTTP 请求内容
哪些 input type 不吃 maxlength，该怎么补救
maxlength 对 type="number"、type="date"、type="range"、type="checkbox" 等完全无效——浏览器直接忽略该属性，控制台也不报错，容易误以为“写了就起作用”。
例如：<input type="number" maxlength="3"> 用户仍可输入任意位数数字，甚至粘贴 “123456789”。
- 数字长度限制应改用
min/max+ JS 拦截：input事件中检查parseInt(el.value) > 999并截断 - 日期类字段用
min/max属性（如min="2026-01-01"），别依赖maxlength - 若坚持用文本框模拟数字输入，可设
type="text" inputmode="numeric" pattern="[0-9]*"，再配maxlength
emoji 和中文混输时 maxlength 计数不准怎么办
maxlength 按 UTF-16 code units 计数，不是用户感知的“字符数”。大多数汉字占 1 个 unit，但辅助平面 emoji（如 ??、?♂️）占 2~4 个 unit，导致显示截断或乱码。
比如 maxlength="1" 遇到 ??，可能只取前两个 code units，结果渲染成 ? 或方块。
- 纯前端场景：可用
Intl.Segmenter统计 grapheme clusters（用户实际看到的“字”），但兼容性有限（Safari 15.4+、Chrome 92+） - 更通用做法：用正则匹配 emoji 和组合符，如
/\p{Extended_Pictographic}|\p{Emoji_Presentation}/u，再结合Array.from(str).length计数 - 终极方案：前端只做友好提示，服务端按业务要求（如 MySQL
VARCHAR(32)字节数）重新校验，因为maxlength根本不对应字节长度
minlength 和 maxlength 就万事大吉——其实它们既不防粘贴，也不管数字输入，更不解决 emoji 截断，连空值都要靠 required 拉一把。 
