maxlength仅对text、search、url、tel、email、password类型input有效，对number、date等无效；textarea支持但粘贴不拦截；表单提交不校验maxlength；需js+服务端双重校验。
input 元素的 maxlength 属性只对部分类型生效
maxlength 不是万能的，它只在 type="text"、type="search"、type="url"、type="tel"、type="email"、type="password" 这些文本类输入控件上起作用。对 type="number"、type="date"、type="checkbox"、type="radio" 等完全无效——浏览器会忽略该属性，也不报错。
常见错误现象：给 <input type="number" maxlength="3"> 设了限制，结果用户仍可输入任意位数数字，甚至粘贴超长数字串。
- 原因：浏览器按规范把
maxlength视为“字符长度”，而number输入框底层处理的是数值，不走字符截断逻辑 - 若需限制数字范围，应改用
min/max+ JavaScript 校验，或换用type="text"并配合pattern和inputmode="numeric" -
textarea支持maxlength，但注意它统计的是 Unicode 字符（含换行符），不是字节数
textarea 的 maxlength 会阻止输入但不阻止粘贴
用户在 textarea 中手动敲字到上限后，键盘输入会被拦截；但用 Ctrl+V 粘贴一段超长文本时，浏览器通常仍会插入全部内容，然后立即触发 input 事件——此时值已越界。
这意味着仅靠 HTML 属性无法保证数据合规，必须配合 JS 监听：
- 监听
input事件，在回调中检查el.value.length > el.maxLength - 发现超长时，可截断：
el.value = el.value.slice(0, el.maxLength) - 注意：直接设
value会重置光标位置；如需保留光标，得用setSelectionRange手动调整 - 移动端尤其要注意，某些 WebView 对粘贴行为处理不一致
form 提交时 maxlength 不参与约束校验
HTML5 表单验证（如调用 form.checkValidity() 或触发表单提交）默认**不检查** maxlength。它只认 required、pattern、min/max（对 number/date）、step 等显式验证属性。
也就是说，即使用户绕过前端限制（比如禁用 JS 后手动修改 DOM），表单依然可能成功提交超长内容。
- 服务端必须做二次校验，不能信任任何前端长度限制
- 若想让
maxlength参与表单验证，需手动添加oninvalid和oninput配合自定义 validity 状态 - 更稳妥的做法：对关键字段（如用户名、短信验证码）在
pattern中嵌入长度约束，例如pattern=".{1,20}"
IE 和旧版 Safari 对 maxlength 的兼容性陷阱
IE10+ 和 Safari 10.1+ 基本支持，但存在两个易被忽略的差异：
- IE 对
textarea的maxlength在中文输入法下可能失效：用户正在组词时（如拼音未上屏），临时字符串长度可能突破限制，直到确认输入才修正 - Safari 12–14 在
contenteditable区域里不支持maxlength，哪怕套了个div[contenteditable]也不行 - 所有浏览器都不支持对
contenteditable元素使用maxlength——这不是 bug，是规范没定义
真正需要限制富文本输入长度时，只能靠 JS 统计纯文本长度（innerText 或 textContent），并主动截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
