maxlength属性可原生限制text、email、password和textarea的字符数，按unicode字符计数而非字节；对number无效，textarea需正确闭合标签；服务端校验不可省略，pattern可补充格式约束。
用 maxlength 属性控制文本类输入长度
对 <input type="text">、<input type="email">、<input type="password"> 和 <textarea></textarea>，直接加 maxlength 是最简单有效的方式。浏览器会阻止用户输入超过该值的字符，且不触发提交——这是原生行为，无需 JS 干预。
注意：它只限制「可输入字符数」，不校验字节长度（比如中文、emoji 占多个 UTF-16 码元，但 maxlength 按 Unicode 字符计数，不是字节）。
示例：
<input type="text" maxlength="20"><textarea maxlength="500"></textarea>
-
maxlength值必须是非负整数；设为0或负数时，多数浏览器视作无效，等同于不限制 - 对
<input type="number">无效——数字输入框不支持maxlength，需用min/max或 JS 控制 - 移动端软键盘可能仍显示“完成”按钮，但超出后无法继续输入，这点容易被误认为失效
为什么 textarea 的 maxlength 有时像没起作用？
常见错因是把 maxlength 写在了 <textarea></textarea> 的闭合标签之后，或用了自闭合写法（如 <textarea maxlength="100"></textarea>），这在 HTML 中非法，浏览器会忽略该属性。
正确写法必须是开始标签带属性、内容可选、显式闭合：
<textarea maxlength="100">已有内容</textarea>
- 服务端仍需校验——前端限制可被绕过（禁用 JS、手动发请求等）
- 若初始值长度已超
maxlength，浏览器不会截断，但用户无法再输入新字符，容易造成表单状态困惑 - 配合
counter提示时（如“还剩 12 字”），要用 JS 监听input事件实时计算，不能只靠maxlength
用 pattern + title 做格式化长度约束
当需要更精细控制（比如「必须是 8–16 位字母数字」），maxlength 不够用，得组合 pattern。它用正则定义合法输入，配合 title 给出提示，提交时浏览器自动校验。
示例（密码需 8–16 位，仅含字母和数字）：
<input type="password" pattern="[a-zA-Z0-9]{8,16}" title="请输入 8 到 16 位字母或数字">
-
pattern在<input type="text">等支持，但对<textarea></textarea>无效 - 正则中
{8,16}是字符数，不是字节数；不支持 Unicode-aware 量词（如\p{L}），复杂需求得靠 JS - 校验发生在表单提交时，用户输入超长但格式匹配，仍可能通过——所以
pattern和maxlength建议共用
后端验证不可省略，尤其涉及存储或安全
前端长度限制只是体验层优化。数据库字段有长度限制（如 MySQL 的 VARCHAR(32)），而用户可通过 curl、Postman 或禁用 JS 的浏览器绕过所有前端限制。
- Node.js/Express 中，用
validator.isLength(str, { min: 1, max: 32 })比手动str.length更可靠（处理空格、全角字符等边界） - Python Flask/Django 需在 form 类或 serializer 中声明
max_length=32，否则 ORM 可能抛DataError - 特别注意：某些框架（如 Laravel）默认对字符串 trim，导致前端显示“还剩 5 字”，实际提交后因去空格变超长，引发 422 错误
真正难的不是加 maxlength，而是确认「这个长度限制到底由谁定义」：是 UI 设计稿？数据库 schema？还是 API 文档？三者不一致时，前端限制反而会掩盖真实问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
