HTML 表单里 maxlength 只对部分输入类型有效
不是所有 <input> 都能用 maxlength 限制长度——它只在 text、search、tel、url、email、password 这些文本类类型上起作用。遇到 number、date、checkbox 或 textarea（注意：textarea 支持，但写法一样），maxlength 要么被忽略，要么行为不一致。
常见错误现象：<input type="number" maxlength="3"> 看似写了，实际用户仍可输入任意位数数字，浏览器根本不校验。
-
textarea支持maxlength，但要注意：换行符（\n）算 1 个字符，某些浏览器对 CRLF（\r\n）可能算 2 个 -
contenteditable元素或富文本框（如div[contenteditable]）完全不响应maxlength，必须靠 JS 控制 - 移动端软键盘可能因
maxlength提前禁用数字键或符号键，影响体验，测试时务必真机验证
后端必须重新校验长度，不能信前端 maxlength
maxlength 是纯客户端限制，删掉 HTML 属性、禁用 JS、用 curl 或 Postman 发请求，都能绕过。服务端不校验等于没设。
使用场景：用户注册填手机号、提交反馈内容、上传文件名等有明确长度边界的字段。
立即学习“前端免费学习笔记（深入）”；
- PHP 中用
strlen()或mb_strlen()（中文必须用后者）判断字符串字节数/字符数 - Node.js 的
req.body.field.length直接读取，但注意：若 body 解析为urlencoded，空格可能被转成+，需先解码 - 数据库字段长度（如 MySQL
VARCHAR(20)）要和前后端限制对齐，否则插入时直接报Data too long
input 和 textarea 的 maxlength 行为差异
两者都支持 maxlength，但渲染表现和事件触发点不同。比如用户粘贴超长文本时，input 通常自动截断末尾，而 textarea 可能光标卡住或触发 input 事件后才修正。
参数差异：maxlength 值是“Unicode 字符数”，不是字节数。一个 emoji（如 ?）在 JS 中 .length === 2（UTF-16 编码），但 maxlength="10" 仍按 1 个字符计——这点多数人会误判。
- 监听
input事件做实时提示时，用el.value.length获取当前长度，别用el.textLength（仅部分浏览器支持且语义模糊） - 设置
maxlength="0"并不会禁用输入，而是允许 0 个字符 → 实际效果是清空后无法再输，慎用 - Chrome 120+ 对超长粘贴做了更激进的剪裁，Firefox 则倾向保留光标位置，兼容性测试不可少
想限制「显示宽度」或「字节数」？maxlength 不管用
maxlength 只管字符个数，不管视觉宽度（比如全角字符占两倍空间）、也不管 UTF-8 字节数。用户填入 10 个中文，在后端存进 MySQL VARCHAR(20) 没问题，但存进某些旧系统要求「最多 30 字节」的字段就会失败。
性能影响：纯属性限制无运行时开销，但若叠加 JS 实时统计字节数（如用 new TextEncoder().encode(str).length），频繁触发会影响滚动或输入流畅度。
- 需要字节限制时，服务端用
Buffer.byteLength(str, 'utf8')（Node）或mb_strlen($str, '8bit')（PHP） - 前端预估字节数可用
unescape(encodeURIComponent(str)).length（兼容老环境），但注意会破坏 URL 编码字符 - 真正难搞的是混合中英文 + emoji + 零宽字符的输入，这类边界情况建议在提交前用正则 + 字节计算双校验
最常被忽略的一点：表单里嵌了动态生成的 input，如果 JS 插入时没同步写 maxlength 属性，或者用 setAttribute('maxlength', '5') 却忘了设 type="text"，那这个限制就形同虚设。
