maxlength仅对text、search、url、tel、email、password及textarea生效，number等类型完全忽略；需用min/max或js监听input事件限制；后端必须独立校验，不可信赖前端maxlength。
HTML input maxlength 属性为什么有时不生效
因为 maxlength 只对 text、search、url、tel、email、password 这几类 type 生效，textarea 也支持，但 number、date、range 等完全忽略它——浏览器根本不读这个属性。
常见错误现象：<input type="number" maxlength="3"> 写了也没用，用户照样能输入 12345；控制台无报错，容易误以为“代码没写错”。
- 真正想限制数字位数？得用
min/max或 JS 监听input事件截断 -
textarea支持maxlength，但注意：换行符\n算 1 个字符，不是 2 个 - 移动端软键盘可能因
maxlength自动切换为数字键盘（仅限type="tel"或"number"，但后者仍不响应maxlength）
怎么让 maxlength 在表单提交前真正起作用
浏览器只做前端拦截，用户禁用 JS 或绕过 HTML 就能发超长内容。后端必须独立校验，不能信 maxlength 的“承诺”。
使用场景：用户注册页限制昵称 12 字、短信验证码输入框固定 6 位。
立即学习“前端免费学习笔记（深入）”；
- 纯前端限制：直接写
<input type="text" maxlength="12">，简单有效 - 需要实时提示剩余字数？监听
input事件读取value.length，别依赖maxlength属性值做计算（有些浏览器会返回null） - 如果用了框架（如 React），别把
maxlength和受控组件的value混用——React 会覆盖原生截断逻辑，得手动event.preventDefault()
maxlength 和 CSS width 容易混淆的点
maxlength 控制的是字符数量，不是显示宽度。设成 maxlength="5" 不代表只能显示 5 个汉字——中文字体、等宽字体、缩放比例都会影响实际占位。
性能/兼容性影响：所有现代浏览器都支持 maxlength，IE10+ 没问题；但老安卓 WebView（4.4 之前）对 textarea 的 maxlength 支持不稳定。
- 不要用
maxlength实现“视觉上只显示 5 个字”，该用text-overflow: ellipsis+ 固定width - 中英文混排时，一个汉字和一个英文字母都算 1 个字符，
maxlength不区分字节长度 - 如果后端要求 UTF-8 字节数限制（比如 MySQL
VARCHAR(32)存 emoji 可能超），maxlength完全无法对应，必须服务端处理
替代方案：什么时候该放弃 maxlength 改用 JavaScript
当需要动态长度、条件限制或特殊字符处理时，maxlength 就不够用了。比如“用户名最多 12 字，但含英文时最多 20 字符”或者“过滤掉空格和 emoji”。
实操建议：优先用原生 maxlength，只在必要时加 JS 补位。
- 监听
input事件比keydown更可靠（能捕获粘贴、拖入、自动填充） - 截断字符串别用
slice(0, n)，要用substring(0, n)避免 Unicode 代理对断裂（比如 emoji） - 记得同步更新
data-length这类自定义属性，方便其他逻辑读取当前长度
maxlength 当成了安全边界。字符长度限制这事，浏览器只负责友好提醒，服务器才是守门人。 
