直接给原生input绑input事件会失效，因为Layui隐藏了原生控件并用伪元素替代，用户操作的是渲染后的DOM；应监听.layui-form容器的input事件委托，匹配INPUT/TEXTAREA/SELECT，并注意防抖、去重、过滤disabled/readonly及输入法兼容。
为什么直接给 input 绑 input 事件会失效？
layui 表单默认启用表单美化（如 lay-form 容器 + layui-form 类），所有原生 input、textarea 会被隐藏，实际显示的是 layui 渲染的 dom（比如 div.layui-input），所以直接对原始 input 元素监听 input 事件基本捕获不到。
- Layui 的输入框是「代理渲染」，真实
input被设为display: none或移出可视流 - 用户操作的是 Layui 生成的伪元素，其内部通过
oninput或onkeyup同步值到隐藏原生控件 - 所以监听目标必须是 Layui 实际响应用户操作的容器节点，或利用其内置机制
用 form.on('submit(...)') 不行，得用 form.on('checkbox|radio|select|...') 吗？
不行。form.on('submit') 只在点击提交按钮时触发；而 form.on('checkbox') 等只响应特定类型控件的「状态变更」（如勾选/切换），且不覆盖 input[type=text]、textarea 等文本类控件。
- 文本类输入框没有对应的
form.on事件类型（Layui 2.8.x 仍不支持form.on('input')） -
form.on('checkbox')和form.on('radio')是独立事件，不能用于监听普通输入 - 想统一监听所有可输入控件，必须绕过
form.on，改用 DOM 事件委托
正确做法：监听 .layui-form 容器的 input 事件（委托）
Layui 在渲染后，会对所有可编辑控件（包括文本框、下拉框、开关等）保持原生事件冒泡能力。只要把事件监听绑定在 .layui-form 容器上，并用事件委托匹配 input、textarea、select 等，就能实时捕获：
- 必须确保监听在
layui.use(['form'], ...)加载完成之后执行 - 推荐使用
document.querySelector('.layui-form').addEventListener('input', ...)，避免重复绑定 - 注意：Layui 的
textarea和input[type=number]也响应input事件，但input[type=range]需额外监听change（因拖动时input触发不及时）
layui.use(['form'], function(){
var form = layui.form;
<p>// 确保 form.render() 已执行（通常页面加载完自动 render）
document.querySelector('.layui-form').addEventListener('input', function(e){
var target = e.target;
if (['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName)) {
console.log('字段名:', target.name, '当前值:', target.value);
// 这里写你的校验、联动、防抖逻辑
}
});
});</p>容易踩的坑：防抖没加、重复绑定、没过滤只读/禁用控件
- 每次调用
form.render()（比如动态追加表单）后，若再次执行上面的 addEventListener，会导致同一事件被绑定多次 → 输入一次触发 N 次回调
-
input 事件在中文输入法「正在组词」阶段也会触发（如拼音未上屏时），若做实时校验，需结合 compositionstart/compositionend 过滤
- 必须跳过
disabled 或 readonly 控件，否则会误触：
if (target.disabled || target.readOnly) return;-
if (!target.name) return;（忽略无 name 的临时控件）
- 对
input[type=checkbox] 和 input[type=radio]，建议改用 change，因为 input 不触发
form.render()（比如动态追加表单）后，若再次执行上面的 addEventListener，会导致同一事件被绑定多次 → 输入一次触发 N 次回调 input 事件在中文输入法「正在组词」阶段也会触发（如拼音未上屏时），若做实时校验，需结合 compositionstart/compositionend 过滤 disabled 或 readonly 控件，否则会误触： if (target.disabled || target.readOnly) return;-
if (!target.name) return;（忽略无 name 的临时控件） - 对
input[type=checkbox]和input[type=radio]，建议改用change，因为input不触发
真正要监听「所有输入框实时变化」，核心就两点：绑对容器、用对事件。Layui 不提供开箱即用的全局 input 监听 API，得自己稳扎稳打接住冒泡事件——这点容易被文档忽略，但恰恰是上线后最常出问题的地方。
