maxlength仅支持text、email、tel、url、search、password和textarea；number、date、file、checkbox、radio及contenteditable元素均不支持，浏览器会静默忽略。
maxlength 是最直接有效的方案，但它只对部分表单控件生效，且不能替代服务端校验。
哪些控件支持 maxlength？哪些不支持？
maxlength 原生支持 <input type="text">、<input type="email">、<input type="tel">、<input type="url">、<input type="search">、<input type="password"> 和 <textarea>。其余类型如 number、date、file、checkbox、radio 完全忽略该属性——浏览器会静默丢弃它，用户仍可任意输入。
常见错误包括：
- 给
<input type="number" maxlength="4">加限制，结果毫无作用 - 误以为
contenteditable的<div>能响应maxlength，实际完全无效 - 拼写错误：写成
max-length或maxLength（HTML 属性名区分大小写，必须全小写）
为什么 textarea 有时加了 maxlength 还能输超？
不是属性失效，而是触发条件被绕过。典型场景有：
立即学习“前端免费学习笔记（深入）”；
- 页面加载时，后端返回的初始值已超限 ——
maxlength只约束新增输入，不主动截断已有内容 - 用户右键粘贴或拖拽文本 —— 部分旧版 Android WebView 或 iOS 输入法在 IME 组词阶段暂不拦截，上屏后才修正
- JS 动态修改了
textarea.value（如自动补全、格式化），绕过了浏览器原生长度检查逻辑
解决方法：初始化时手动截断，例如 textarea.value = textarea.value.slice(0, 200)；同时监听 input 和 paste 事件做兜底。
如何用 JavaScript 补足 maxlength 的盲区？
核心是监听 input 事件（非 keydown 或 change），并配合防抖与光标修复：
- 对
type="number"，用el.value.length > 4判断（value始终是字符串） - 粘贴时必须调用
event.preventDefault()，再手动取event.clipboardData.getData('text')截断 - 截断后调用
el.setSelectionRange(el.value.length, el.value.length)，避免光标卡在中间 - 若需按 UTF-8 字节数限制（如匹配 MySQL
VARCHAR(255)），用new TextEncoder().encode(str).length计算
服务端校验为什么不可省略？
前端所有限制都可被绕过：禁用 JS、删 DOM 属性、curl 直发请求、抓包重放……服务端收到数据后，必须重新计算字符长度（注意用 mb_strlen($str, 'UTF-8') 或 len(text)，而非 strlen() 或 len(text.encode('utf-8'))）。数据库字段定义也要留余量，比如前端限制 200 字，后端字段至少设为 VARCHAR(255) —— emoji、代理对、换行符等都可能让字节数翻倍。
