maxlength仅对text、search、url、tel、email、password有效，对textarea非强制支持，对number、date、file等无效；需js补足粘贴拦截、服务端必须校验。
maxlength 属性只对 text、search、url、tel、email、password 有效
它不能限制 textarea 的字符数（虽然现代浏览器支持，但 HTML 规范未强制要求），更对 number、date、file 等类型完全无效。比如给 <input type="number" maxlength="3"> 加了也没用——浏览器会忽略，用户仍可输入任意位数数字。
常见错误是把 maxlength 当成“所有输入框通用长度控制”，结果在 number 或 email 上调试半天没反应。
-
email类型虽支持maxlength，但校验逻辑优先级低于邮箱格式验证；用户可能因格式不合法被拦住，根本走不到长度判断 -
search和url行为与text一致，可放心用 - 移动端软键盘行为受
maxlength影响：达到上限后，部分 iOS 键盘会禁用输入，Android 则可能仍允许粘贴超长内容（需额外拦截）
用 JavaScript 补足 maxlength 的盲区
当需要控制 number 输入位数、或防止用户粘贴超长文本绕过 maxlength 时，得靠 JS 拦截。核心思路是监听 input 和 paste 事件，实时截断。
示例：限制 input[type="number"] 最多 4 位数字
const input = document.querySelector('input[type="number"]');
input.addEventListener('input', () => {
if (input.value.length > 4) {
input.value = input.value.slice(0, 4);
}
});
注意点：
- 仅监听
input不够——用户右键粘贴或拖拽文本会跳过该事件，必须同时监听paste并调用event.preventDefault() -
input.value是字符串，即使type="number"，它的长度也是字符长度，不是数值大小 - 直接赋值会触发新的
input事件，需加防抖或标记避免死循环
textarea 的长度限制不能只靠 maxlength
虽然多数浏览器已实现 textarea maxlength，但旧版 Safari（iOS 9–10）和部分 Android WebView 会忽略它。稳妥做法仍是 JS + 属性双保险。
关键细节：
-
maxlength对textarea计算的是 Unicode 码点数，不是字节数；中文、emoji 都算 1 个长度单位 - 设置
maxlength="100"后，用 JS 获取textarea.value.length即可准确比对，无需额外编码转换 - 视觉反馈很重要：在表单旁实时显示剩余字数（如 “还剩
<span id="counter">100</span>字”），比单纯截断更友好
服务端必须重新校验，前端限制只是体验优化
maxlength 和 JS 截断全是客户端行为，删掉 script 标签或用 curl 发请求，就能轻松绕过。任何涉及数据完整性的场景（比如数据库字段长度限制为 50），服务端必须做等效校验。
容易被忽略的点：
- 用户可能用浏览器开发者工具直接修改
maxlength属性值，再提交——此时前端限制形同虚设 - 某些框架（如 React）中，直接操作
input.value可能导致受控组件状态不一致，应通过setState更新 - 国际化场景下，全角空格、零宽字符等特殊符号也计入
length，但用户感知不到；若业务要求严格按字节数限制（如短信接口），就得用TextEncoder计算 UTF-8 字节数
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
