maxlength对拼音输入无效，因其限制的是unicode码点数而非按键次数，且输入法组合过程会插入零宽字符干扰长度判断；须用compositionstart/end事件配合状态管理、光标保护及延迟校验来准确截断。
为什么 maxlength 对拼音输入无效
因为 maxlength 限制的是最终 input.value.length（即 Unicode 码点数量），而用户用中文输入法打“shanghai”再上屏成“上海”，只占 2 个字符——哪怕敲了 8 下键盘，maxlength="2" 也拦不住。更麻烦的是：输入法在组合过程中可能往 value 插入零宽字符（如 \u200D），导致长度虚高，截断逻辑误判。
compositionstart / compositionend 是唯一可靠判断依据
浏览器通过这两个事件明确区分“正在选词”和“已经上屏”。不能依赖 event.target.isComposing，因为 Safari 不支持该属性；必须自己维护状态：
- 监听
compositionstart，设isComposing = true - 监听
compositionend，设isComposing = false，并立即执行长度校验 - 监听
input，但只在!isComposing时处理
注意：compositionend 总是在 input 之后触发，所以不能只等 input 事件再检查——否则读到的仍是拼音串。
截断时必须保留光标位置
直接赋值 el.value = el.value.slice(0, 10) 会把光标强制跳到末尾，破坏输入体验。正确做法是：
- 先记录
el.selectionStart和el.selectionEnd - 截断后调用
el.setSelectionRange(pos, pos)恢复光标 - 若截断发生在中间（比如用户在第 5 位插入超长内容），需按原光标位置做边界计算，避免光标“跳飞”
移动端尤其要注意：iOS Safari 中 value 可能滞后一帧，compositionend 后建议用 setTimeout(() => { /* 再读一次 */ }, 0) 微任务延迟取值。
submit 和 blur 必须兜底校验
用户点提交按钮时，submit 事件常抢在 compositionend 前发生，导致表单发出去的是拼音而非汉字。解决方案：
form.addEventListener('submit', e => { if (isComposing) { e.preventDefault(); setTimeout(() => form.submit(), 0); } })input.addEventListener('blur', () => { setTimeout(() => { /* 重新检查 value 长度 */ }, 0); })- 更稳妥的方式是用
new FormData(form).get('field')取值——它内部会等待 composition 结束，比手读input.value可靠
真正容易被忽略的是：所有这些逻辑都必须在页面初始化时绑定，且不能被动态插入的新 input 覆盖；如果表单字段是 JS 动态生成的，每次插入后都要重新 attach 这套事件链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
