maxlength是最直接可靠的字符限制方式，原生支持且无需js；它按unicode码点计数，中文英文符号均算1个，但部分emoji算2个；不校验初始值，需前端预截断。
maxlength 是最直接、最可靠的方式，浏览器原生支持，无需 JS 就能阻止超长输入。
用 maxlength 属性限制字符总数
它适用于 <input> 和 <textarea></textarea>，在标签里加一个数字即可生效：
<input type="text" maxlength="15"><textarea maxlength="200"></textarea>
浏览器会自动截断粘贴内容、禁用键盘输入（超出后按任何键都无效），且所有现代浏览器（Chrome/Firefox/Safari/Edge）均完全支持。
注意点：
-
maxlength按 Unicode 码点计数，不是字节数 —— 中文、英文、数字、常见符号都算 1 个字符 - 某些 emoji（如 ?✨??）是代理对（surrogate pair），会被算作 2 个码点，可能比预期少输 1–2 个
- 它不校验初始值：如果服务端返回的 value 已超长，
maxlength不会自动截断，需前端预处理
为什么不能只靠 pattern 或 minlength/maxlength 表单属性校验
pattern 只在表单提交时触发验证，不阻止输入；minlength 和 maxlength 在 <input> 上有效，但 <textarea></textarea> 不支持 minlength（HTML5 规范未定义）。
典型错误现象：
- 用户粘贴一段 300 字的文本进
<textarea maxlength="100"></textarea>，结果整个内容被吞掉（这是正常行为），但若你用pattern=". {1,100}"，粘贴后仍能显示全部，直到点击提交才报错 - 设置
<input minlength="6" maxlength="12">后，用户清空输入框再提交，required会报错，但minlength不会 —— 它只在校验非空值时起作用 -
pattern的正则必须匹配整个字符串，pattern=". {1,10}"实际上要求“恰好 1–10 个任意字符”，中间有空格或换行就失败，容易误判
需要动态控制长度时，用 JS 修改 maxlength 属性
比如根据用户角色切换字段限制：admin 可输 500 字，guest 仅限 50 字。
直接改 DOM 属性即可，浏览器立刻响应：
document.getElementById('desc').maxLength = 50;
注意别写成 .maxlength（小写）—— DOM 属性名是 maxLength（驼峰），而 HTML 属性是 maxlength（全小写）。写错会导致静默失败，无报错也无效果。
其他常见坑：
- 用
setAttribute('maxlength', '50')也能生效，但不如直接赋值maxLength属性来得稳定（尤其在 React/Vue 等框架中，可能被虚拟 DOM 覆盖） - 不要在
input事件里反复调用slice()截断 +setSelectionRange()—— 这会干扰用户编辑体验，光标乱跳，且无法覆盖粘贴、拖入等操作 - 移动端 iOS Safari 对
maxlength的代理对计数更严格，测试时务必用真机 emoji 输入验证
真正容易被忽略的是：当后端返回的初始值超过 maxlength 时，浏览器不会自动修正，用户看到的是完整字符串，但后续任何输入都会被卡住。这个边界情况必须在渲染前做 value = value.slice(0, maxLength) 处理，否则会引发用户困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
