maxlength只是输入拦截器而非字数保险丝，因它仅拦截键盘输入和部分粘贴，对中文输入法未上屏、拖入文本、js赋值无效；须配合input事件截断、光标位置维护及后端一致校验。
maxlength 属性能用，但只拦得住键盘敲击和部分粘贴，对中文输入法未上屏、拖入文本、JS 赋值完全无效——它不是“字数保险丝”，而是“输入拦截器”。
为什么 maxlength 有时形同虚设
浏览器只在新增输入时触发截断逻辑，已有内容不受约束。典型失效场景包括：
- 服务端返回的初始
value已超限（maxlength不会自动截断） - 用户用鼠标拖入一段长文本（部分浏览器允许短暂越界）
- 中文输入法处于组词状态（如拼音输入中途，字符暂未上屏，
value.length还没更新） - 通过 JS 直接赋值：
textarea.value = longStr，绕过所有原生限制
必须监听 input 事件做兜底截断
keydown 和 paste 都不完整：keydown 捕不到粘贴，paste 捕不到拖入或 IME 上屏。只有 input 是唯一可靠入口，它覆盖所有变更来源。
- 截断代码必须写成
el.value = el.value.slice(0, 200)，不能只校验不赋值 - 直接改
value会导致光标跳到末尾；如需保持位置，得提前用getSelectionRange()记录，再用setSelectionRange()恢复 - Vue/React 中别直接操作 DOM 的
value，否则响应式数据不同步；应先截断再更新绑定变量
移动端中文输入法的特殊坑
iOS Safari 表现较稳，但多数安卓输入法（Gboard、搜狗、百度）在组词阶段会临时让 value.length 超出 maxlength，直到用户点击候选词确认上屏才触发截断——此时用户看到“已输 205 字”，光标还能移动，表单却可能提交失败。
- 缓解方式：在
input回调里加一层防御性截断，哪怕当前长度刚超 1 字也立即 slice - 别依赖
change事件做最终校验，它只在失焦时触发，无法阻止提交 - 后端必须按相同规则校验（UTF-16 code units 计数），否则前端截了、后端又拒，体验断裂
真正可靠的字数控制，是 maxlength + input 截断 + 后端一致校验三层嵌套；任何一层缺失，都可能在某个输入法、某次粘贴、某个框架更新后突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
