微信和QQ内置浏览器（X5内核）对maxlength支持不完整，尤其在中文输入法下易失效，需用bindinput+setData事件驱动控制并配合光标保护与服务端校验。
微信和QQ内置浏览器（X5内核）对 maxlength 的支持不完整，尤其在中文输入法场景下极易失效——不是你代码写错了，而是 WebView 本身没按标准实现。
微信/QQ WebView 中 maxlength 失效的典型表现
用户用拼音输入时，还没选词就卡住；粘贴一段文字后长度爆表却没被截断；iOS 微信里 <textarea></textarea> 完全无视 maxlength。这不是个别 bug，而是 X5 内核长期未对 composition 事件和码点计数做完整适配。
- 安卓微信 8.0+、QQ 浏览器 13.x 对
input[type="text"]的maxlength支持尚可，但仅限英文/数字直输 - iOS 微信（WKWebView 封装层）对
textarea的maxlength基本不生效，连input在拼音上屏瞬间也常漏判 - 所有版本的 QQ 内置浏览器（X5）都不支持
compositionstart/compositionend的标准触发时机，导致 JS 截断逻辑错位
必须用 bindinput + setData 替代原生 maxlength（微信小程序）
小程序环境不能依赖 HTML 属性，maxlength 在 iOS 上会把拼音串计入长度，造成“打两个字就满”的体验。正确做法是彻底弃用该属性，改用事件驱动控制：
- WXML 中去掉
maxlength，只留bindinput和双向绑定：<input value="{{val}}" bindinput="onInput" /> - JS 中用
String.prototype.slice(0, N)裁剪，不要用substr或正则——避免代理对（emoji）被劈开 - 关键：加
if (!e.detail.cursor)判断是否处于输入法组合中，否则会在拼音阶段误截 - 示例：
this.setData({ val: e.detail.value.slice(0, 10) });，注意setData是异步的，别在循环里高频调用
网页版（非小程序）在微信/QQ 中的兜底方案
纯 H5 页面无法调用小程序 API，得靠更鲁棒的 JS 监听组合：
立即学习“前端免费学习笔记（深入）”；
- 同时监听
input和paste事件，paste中必须event.preventDefault()后再手动插入裁剪后内容 - 对 X5 内核，
compositionend触发不可靠，改用setTimeout延迟 50ms 再检查长度（实测比轮询稳定） - 避免直接赋值
el.value = ...，改用el.setRangeText(..., el.selectionStart, el.selectionEnd, 'preserve')保光标 - 服务端必须校验 UTF-8 字节数，X5 提交的 emoji 可能多出 1–2 个代理单元，
str.length在 Node.js 里会误判
真正麻烦的不是写几行截断代码，而是 X5 内核对 Unicode 码点的解析和事件调度与标准浏览器不一致——同一段 JS，在 Chrome 里稳如磐石，在微信里可能光标乱跳或漏触发。上线前务必用真机测拼音输入、长文本粘贴、emoji 连续输入这三类操作。
