maxlength仅支持type="text"、"search"、"url"、"tel"、"email"、"password"及，对number等类型无效；它仅为前端限制，后端必须校验。
maxlength 属性确实能限制用户在 <input> 中输入的字符数，但它只作用于文本类输入控件（type="text"、"email"、"password" 等），对 type="number" 或 type="textarea" 无效 —— 后者需用 maxlength 配合 <textarea></textarea> 标签本身，而前者根本无视该属性。
哪些 input type 支持 maxlength？
只有语义上表示「字符串输入」的类型才响应 maxlength：
-
type="text"、"search"、"url"、"tel"、"email"、"password"—— ✅ 支持 -
type="number"、"range"、"date"、"checkbox"、"radio"—— ❌ 不支持（浏览器会忽略） -
<textarea></textarea>—— ✅ 支持，且是唯一推荐方式（<input type="text">无法换行，不适用于多行场景）
maxlength 是纯前端限制，绕过极其容易
它只影响表单交互行为，不参与任何校验逻辑。用户禁用 JS、用 DevTools 删除属性、或直接 POST 请求都能绕过。
- 后端必须重新校验长度，不能信任前端传来的值
- 若需实时反馈超长状态，得监听
input事件 + 检查value.length - 注意：中文、emoji、组合字符（如带声调的 á）在 JavaScript 中的
.length计算可能与视觉长度不一致（涉及 UTF-16 编码），maxlength本身按 Unicode 码点计数，一般情况下与用户感知一致
和 size、pattern 混用时的常见误解
size 控制的是输入框**可见宽度**（以字符为单位），和长度限制无关；pattern 是正则校验，不控制长度。
-
<input maxlength="5" size="20">：最多输 5 字，但输入框显示约 20 字宽 -
<input maxlength="5" pattern="[a-z]{5}">：强制恰好 5 个小写字母，但用户仍可先输 6 个再删减 ——maxlength会阻止第 6 次输入，pattern只在提交/校验时起效 - 若同时设
required和maxlength="0"，输入框将永远无法通过验证（因为不能为空，又不允许任何字符）
真正关键的不是加不加 maxlength，而是确认它是否出现在正确的标签和类型上，并意识到它从不替代服务端校验 —— 尤其当输入内容涉及存储、索引或下游系统约束时，数据库字段长度和 API 接口定义才是硬边界。
