maxlength是最直接的浏览器原生输入长度限制方式，仅适用于text、search、password、email、tel及textarea等表单元素，按UTF-16码元计数，但非安全机制，必须配合服务端二次校验。
maxlength 是最直接、浏览器原生支持的输入长度限制方式，但它仅控制客户端输入上限，**不能替代服务端校验**。
什么时候该用 maxlength 属性
适用于明确知道字段最大字符数且无需动态变化的场景，比如用户名（20 字）、验证码（6 字）、短标题（50 字）。
- 只对
<input type="text">和<textarea>有效，对type="number"、type="email"等无效 - 设为
maxlength="0"不会禁用输入，而是等效于未设置；设为负数会被忽略 - 中文、英文、emoji、全角空格均按 1 个字符计数（UTF-16 编码下部分 emoji 占 2 个码点，但现代浏览器仍按 1 字符处理）
- 用户粘贴超长内容时，浏览器会自动截断——但仅限在焦点处于该元素内时生效
为什么不能只靠 maxlength 防数据越界
它纯属前端提示性限制，移除属性或绕过表单提交（如用 fetch 直接发请求）后，后端照样能收到任意长度数据。
- 攻击者可通过 DevTools 删除
maxlength属性，或用 curl / Postman 构造超长 payload - 某些旧版 Android WebView 或第三方键盘可能忽略该属性
- 服务端若没做等长校验（如数据库字段是
VARCHAR(10)却接收 200 字），会导致截断、报错甚至注入风险 - 如果你依赖
maxlength做 UI 布局（比如根据长度显示剩余字数），记得同步监听input事件而非仅靠属性值
如何配合 JavaScript 动态调整 maxlength
当输入规则随状态变化时（如切换“个人”/“企业”注册类型，字段长度不同），需 JS 控制。
立即学习“前端免费学习笔记（深入）”；
- 修改方式统一用
element.maxLength = N（注意是maxLength，驼峰写法），不是setAttribute('maxlength', N)，后者不触发浏览器实时限制 - 建议在状态变更后立即更新，并手动触发一次
input事件，确保已输入超长内容被截断：element.value = element.value.slice(0, N) - 避免在
input事件里频繁重设maxLength，可能引发输入卡顿或光标跳变 - 若需兼容 IE9–10，注意它们不支持
textarea的maxlength，得用 JS 拦截 + 截断
真正关键的边界永远在服务端——maxlength 只是第一道轻量提示，别让它成为你唯一的数据守门员。
