必须监听原生input事件,因change仅失焦后触发,无法响应输入、粘贴、中文上屏等实时操作;需加e.isComposing===false判断规避输入法干扰,且绑定须在form.render()之后。

直接监听 input 事件,不是 change,也不是 blur —— 这是唯一能覆盖输入、粘贴、中文上屏、拖入等所有场景的方式。
为什么不能用 change 事件
change 只在 textarea 失焦且值发生改变后触发,中间任何操作都不会响应:
- 用户边打字边看实时字数 →
change完全不触发 - Ctrl+V 粘贴整段文字 →
change不触发(直到点别处失焦) - 中文输入法选词中(如“shang”→“上”)→
change延迟到敲空格+失焦才触发 - 连续删改 → 只在最后失焦时触发一次,无法做逐字符逻辑
怎么正确绑定 input 事件
必须监听原生 input 事件,并注意 DOM 状态和中文输入法干扰:
- 推荐写法:
document.querySelector('.layui-textarea').addEventListener('input', handler),不要依赖form.on()(Layui 2.8.x 不支持form.on('input')) - 如果
textarea是动态渲染的(比如form.render()后插入),确保事件绑定在form.render()之后执行 - 务必加判断:
if (e.isComposing === false),否则拼音未上屏阶段(如“ni”)就触发,导致中间态内容误同步 - 避免用
keyup:它捕获不到鼠标粘贴、IME 组词完成、拖放文本等操作
富文本编辑器(layedit)的内容变化怎么监听
Layui 2.x 没有提供 layedit 的内容变更事件 API,得手动监听 iframe 内部 body 的变化:
- 初始化后,找到对应
iframe元素:document.querySelector('#LAY_layedit_1') - 用
iframe.contentDocument.body.addEventListener('input', ...)监听(注意跨域限制,同源才可用) - 更稳妥的做法是轮询 + MutationObserver:监听
iframe.contentDocument.body的子节点或文本内容变化,因为部分浏览器对 iframe 内input事件支持不稳定 - 别试图监听外层
.layui-layedit容器的input—— 它不冒泡,也不响应编辑器内部操作
最易被忽略的是中文输入法的 isComposing 判断,漏掉它,用户打中文时 UI 就会频繁闪动或校验错乱;富文本则容易误以为监听外层容器就行,实际必须钻进 iframe 里抓 body。


















