maxlength仅对text、password、email、tel、url、search和textarea类型生效，number等类型忽略该属性；它不参与原生校验、不清理已有超长值、不拦截粘贴、按utf-16计数，后端校验不可省。
maxlength 能控制输入框最大长度，但只对特定类型生效，且不等于“绝对拦截”——它只是前端体验层的辅助手段，不是数据防线。
哪些 input 类型真正支持 maxlength？
只对以下类型有效：text、password、email、tel、url、search 和 textarea。其他类型如 number、date、range、file 完全忽略该属性，写了也白写。
常见错误现象：<input type="number" maxlength="3"> 用户照样能输入 123456，控制台无报错，容易误判为“代码没生效”。
真正想限制数字位数？得用 min/max 配合 JS 截断，或改用 type="text" + pattern + 输入过滤。
maxlength 不会主动修正已有超长值
设置 maxlength="5" 后，浏览器只在新增输入时拦截第 6 个字符（静默丢弃，input 事件都不触发），但不会清理已存在的超长内容：
- 用户通过 DevTools 直接设
el.value = "123456"→ 值保留，表单可提交 - JS 动态赋值后，必须手动
el.value = el.value.slice(0, el.maxLength) -
el.maxLength属性本身修改，不会重置当前value
这意味着：仅靠 HTML 属性无法保证 DOM 值合规，尤其在受控组件或动态更新场景下极易出错。
表单提交时 maxlength 默认不校验
浏览器默认只响应 required、pattern、min/max（对 number/date）等显式验证属性。maxlength 不参与原生校验流程——哪怕 value.length > el.maxLength，点击提交仍会成功。
若要让它参与提示，必须手动调用：
el.setCustomValidity(value.length > el.maxLength ? "超出最大长度" : "");
并在 input 事件中同步更新，否则提示状态滞后。
更轻量的做法是用 pattern=".{" + min + "," + max + "}"（例如 pattern=".{"1,10}"），这样原生验证机制就会触发 UI 提示。
移动端和粘贴行为的现实坑点
textarea 的 maxlength 在部分 Android WebView 和旧版 Safari（iOS 9–10）中不可靠；用户 Ctrl+V 粘贴 200 字符，多数浏览器先插入再触发 input 事件——此时 el.value.length > 100 已成事实。
JS 截断后光标会跳到末尾，需用 el.setRangeText() 或 el.setSelectionRange() 保持位置；屏幕阅读器可能感知不到变化，建议配合 aria-live 区域播报剩余字数。
注意：maxlength 按 UTF-16 code unit 计数，一个 emoji 如 "??" 实际占 4 个单元，.length 返回 4，但用户感知是 1 个“字”——这种偏差在昵称、评论等场景容易引发投诉。
真正关键的不是怎么写 maxlength，而是意识到它只管“字符数”，不管字节、不管语义、不管绕过手段。后端校验不可省，JS 补位不能漏，而用户看到的“还剩 3 字”提示，往往比硬截断更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
