maxlength 对中文拼音输入无效，因其仅限制最终字符串长度而非输入过程；用户可输入超长拼音再上屏为短汉字，需结合 compositionstart/end 事件、unicode 长度计算及光标维护实现精准控制。
maxlength 对中文拼音输入的实际效果是什么
maxlength 限制的是 DOM 中 input 元素的 value.length，而这个长度是按 Unicode 码点（即 JavaScript 字符串长度）计算的。用户用拼音输入法打字时，即使还没上屏（比如还在候选框里选词），浏览器通常不会触发 input 事件，也不会改变 value；但一旦按下空格、回车或点击候选词完成上屏，整段汉字（或多个汉字）会一次性写入 value，此时 maxlength 才起作用。
所以单纯靠 maxlength="10" 无法阻止用户在输入框里敲出“shanghaishi”再上屏成“上海市”，因为“上海市”只有 3 个字符，远没超限——但用户实际敲了 11 下键盘。你要限制的是“输入行为过程”，不是“最终字符串长度”。
为什么 oninput + maxlength 拦不住拼音上屏后的超长输入
常见错误是监听 input 事件并手动截断：el.value = el.value.slice(0, 10)。这在英文输入下有效，但在拼音输入场景下会出问题：
- 用户正在输入“zhongguo”，还没选词，
value是空或只有“zhongguo”（拼音），此时截断会破坏输入法状态 - 用户已上屏“中国”，再继续打“renmin”，上屏后变成“中国人民”，共 4 字——但若你用
slice(0, 3)强制截断，可能把“中国人民”砍成“中国人”，且光标跳到开头，体验极差 - 某些输入法（如搜狗、微软拼音）在组合过程中会往
value插入零宽字符（如\u200D或\uFE0F），导致value.length虚高，误判超限
真正可用的方案：compositionstart / compositionend 配合长度校验
关键在于区分“输入法组合中”和“已确认上屏”。浏览器提供了 compositionstart 和 compositionend 事件，可用来判断用户是否处于拼音输入状态：
实操建议如下：
- 监听
compositionstart：设一个标志isComposing = true，暂停所有长度拦截逻辑 - 监听
compositionend：设isComposing = false，此时再检查input.value.length是否超限，超限则截断并保留光标位置（用setSelectionRange） - 同时监听
input事件，但只在!isComposing时执行截断逻辑 - 截断时别直接赋值
el.value = ...，否则光标会跳到末尾；应先记录原光标位置，截断后再恢复：const pos = el.selectionStart;<br>el.value = el.value.slice(0, 10);<br>el.setSelectionRange(pos > 10 ? 10 : pos, pos > 10 ? 10 : pos);
移动端和 Safari 的特殊坑
iOS Safari 对 compositionstart/end 支持不完整，部分版本根本不触发；Android Chrome 也有兼容性波动。这时只能退守“防御性截断”：
- 在
input事件里加延时判断：setTimeout(() => { if (!isComposing) checkAndTruncate(); }, 0) - 对
value做 Unicode 正规化处理，避免代理对（surrogate pair）或组合字符导致长度误算：Array.from(el.value).length比el.value.length更准 - 不要依赖
maxLength属性做唯一防线——它只是辅助，核心逻辑必须由 JS 控制 - 如果业务允许，改用
textarea并禁用自动换行（white-space: nowrap），其 composition 事件更稳定
拼音输入这件事，本质是浏览器、输入法、JS 执行时机三者博弈。没有一劳永逸的属性开关，得靠事件状态+长度重算+光标维护才能稳住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
