maxlength在layui中常失效，因仅作html属性且未增强原生行为，粘贴、中文输入法组合态、拖放等场景均绕过限制，须结合oninput实时截断与composition状态处理。
单纯加 maxlength 属性在 Layui 表单中不可靠，必须配合 oninput 实时截断 + 中文输入法兼容处理，否则粘贴、拼音上屏前、拖入文本都会绕过限制。
为什么 maxlength 在 Layui 里经常失效
Layui 的 .layui-textarea 类不劫持或增强原生行为，maxlength 仅作为 HTML 属性存在。现代浏览器虽能拦截部分键盘输入超长，但以下场景完全无效：
- 鼠标右键粘贴或 Ctrl+V 粘贴整段文字（
paste事件中this.value还是旧值） - 中文输入法「组合中」状态（如敲完 “zhongguo” 但尚未选字），
oninput已触发，但此时value是拼音，直接截断会清空输入框 - 拖放文本到
textarea区域 - 通过 DevTools 手动修改 DOM 的
maxlength值
正确绑定 oninput 并处理 composition 状态
核心是监听 input 事件，但必须过滤掉输入法组合过程，且粘贴后需延迟读取真实值：
- 用
e.isComposing === false判断是否处于输入法上屏完成态（Chrome/Firefox 支持） - 若不支持
isComposing（如旧版 Safari），改用compositionstart/compositionend标记开关 - 对
paste事件，必须用setTimeout(() => { /* 读 value */ }, 0)，否则拿不到粘贴后的内容 - 截断后要显式赋值
this.value = val.slice(0, max)，否则光标跳尾、重复触发
示例函数：
function limitText(el, max) {
if (el.isComposing) return;
let val = el.value;
if (val.length > max) {
el.value = val.slice(0, max);
}
// 更新同级 .word 元素
$(el).next('.word').text(`${el.value.length}/${max}`);
}
显示剩余字数的 DOM 和样式要点
计数元素必须精准定位，且不能全局匹配：
-
.layui-input-block必须设position: relative，否则.word的position: absolute会相对 body 定位，飘走 -
.word推荐样式：position: absolute; right: 10px; bottom: 8px; font-size: 12px; color: #aaa; - JS 更新必须用
$(el).next('.word')，禁用$('.word')—— 多个textarea会互相覆盖显示 - 动态插入的表单（如
layer.prompt或弹窗），确保.word元素在绑定事件前已存在，否则.next()返回空
Layui 表格中编辑单元格的特殊处理
表格的 edit: "textarea" 是封装过的，不透传 maxlength，也无法绑定 oninput：
- 必须放弃
edit配置，改用templet自定义模板：templet: '<textarea maxlength="100" oninput="limitText(this, 100)"></textarea>' - 表格重载（如
table.reload()）时，需先off('input')再重新绑定，避免事件重复注册 - 更稳妥的做法是用事件委托：
$(document).on('input', '.table-textarea', function() { ... })，并确保 class 名唯一
最易被忽略的是：中文输入法组合过程中不暂停校验，会导致用户打字卡顿甚至输入框清空；而表格内自定义模板没处理 paste 的 setTimeout，粘贴就直接超限。
