maxlength只是浏览器原生软限制，不校验内容、不阻止粘贴、不兼容中文输入法未上屏状态；需结合compositionstart/compositionend与input事件，用slice裁剪并setSelectionRange保持光标位置。
maxlength 只限制表单控件的输入字符数，不校验内容、不阻止粘贴超长文本、不兼容中文输入法未上屏状态——它只是浏览器原生的“软限制”。
为什么 maxlength 在中文输入时经常失效
用户正在用拼音或五笔输入法打字时，候选词还没确认（即“未上屏”），maxlength 不会拦截。浏览器只在字符真正插入到 <input> 或 <textarea> 的 value 中后才检查长度。此时用户可能已输入十几个拼音字母，但只占 1 个可视位置。
- 现象：输入“zhongguo”，还没按空格选词，
value是空的；一按空格，“中国”上屏，value突然变成 2 字符，但之前那串拼音没被算进去，也没触发截断 - 解决思路：监听
compositionstart/compositionend事件，在输入法组合过程中暂存状态，组合结束再做长度判断 - 注意：
input事件在 composition 过程中不会触发，不能只靠它
如何让 maxlength 和 JS 校验协同工作
单纯依赖 maxlength 不可靠，必须配合 JavaScript 实时控制。关键是：在用户完成一次输入（含输入法上屏）后，立刻检查并裁剪 value，同时保持光标位置合理。
- 监听
input和compositionend两个事件，覆盖普通输入和输入法场景 - 裁剪时用
String.prototype.slice(0, N)，不要用substr或正则替换，避免代理对（surrogate pair）被错误截断（如 emoji） - 若需保留光标位置，得用
setSelectionRange手动重置，否则光标会跳到末尾 - 示例逻辑：
el.addEventListener('input', () => {<br> if (el.value.length > 10) {<br> const old = el.value;<br> el.value = old.slice(0, 10);<br> el.setSelectionRange(10, 10);<br> }<br>});
maxlength 在不同标签和浏览器中的行为差异
maxlength 并非所有元素都支持：仅 <input type="text">、<input type="password">、<input type="search">、<input type="tel">、<input type="url"> 和 <textarea> 有效；<input type="number"> 忽略该属性。
- Safari 对
<textarea>的maxlength支持较晚（iOS 12+），旧版需完全靠 JS - Chrome 和 Firefox 允许通过 DevTools 修改 DOM 属性绕过
maxlength，所以服务端仍必须做长度校验 -
maxlength="0"表示不限制（不是禁止输入），想禁用请用disabled或readonly
真正难的不是写几行截断逻辑，而是处理好输入法组合过程中的状态同步、光标位置、代理对截断、以及移动端软键盘触发时机——这些细节一旦漏掉，用户就会遇到“明明打了 10 个字却提示超长”或者“删不掉最后一个字”的问题。
