layui分页跳转输入框keydown绑定不上,因元素动态生成且Layui内部接管事件;应优先使用table.on('page(id)')监听跳转完成事件,语义清晰、时机稳定。
layui table 分页跳转输入框的 keydown 事件为什么绑定不上?
因为 layui 的分页跳转输入框是动态生成的,且未暴露 dom 引用,直接用 document.queryselector 或 $('input[lay-key="page"]') 在表格渲染前查不到元素;更关键的是,layui 会接管该输入框的 keydown(比如回车跳转、非数字拦截),你的监听可能被覆盖或触发太晚。
用 table.on('page', ...) 替代按键监听更可靠
Layui 表格的分页行为(含手动输入后回车、点击「跳转」按钮、点击页码)最终都会触发 page 工具栏事件,它携带了当前页码和每页条数,语义清晰、时机稳定,无需 hack 输入框。
-
table.on('page(test)')中的test是你初始化表格时传入的id值(如elem: '#test'对应test) - 回调参数
obj包含curr(当前页码)、limit(每页数),注意:这是「跳转完成后的页码」,不是输入框里的原始值 - 若需区分「用户主动跳转」和「初始化加载」,可配合
table.reload()时加where: { _t: Date.now() }等标记字段
真要监听输入框按键?必须等 DOM 出现后再绑定
如果业务强依赖输入过程(比如实时校验、防抖提示),只能监听父容器委托,并确保在表格重绘后重新绑定——因为分页区域每次翻页都可能重建。
- 监听点选
.layui-table-page .layui-laypage-skip input,不要用固定 ID 或 class 名(Layui 不保证稳定) - 用事件委托绑定到
document或表格容器(如#test + .layui-table-view),避免重复绑定:$(document).on('keydown', '.layui-laypage-skip input', function(e) { if (e.key === 'Enter') { // 注意:此时 layUI 还未处理,curr 值仍是旧的 console.log('用户按了回车,输入值:', this.value); } }); - 输入框内容可能含空格、中文数字、负号等,
parseInt(this.value)会静默失败,建议用Number(this.value.trim()) || 1
注意 page 事件和输入框事件的触发顺序差异
当用户在跳转框输入「5」并回车:
→ 先触发你的 keydown(拿到原始字符串)
→ Layui 内部校验、转换、请求数据
→ 最后触发 table.on('page(...)')(拿到合法整数页码)
这两者不是同一时刻,不能假设 page 事件里能读到输入框的 DOM 状态。
- 不要在
page回调里再查input.value,它可能已被 Layui 清空或重置 - 若需记录原始输入,必须在
keydown或blur阶段存到闭包变量或data-属性中 - 移动端软键盘回车键可能触发
input事件而非keydown,需同时监听change和blur
table.on('page(...)') 是唯一受支持的入口;只有当业务明确要求干预「输入过程」本身,才值得投入精力处理动态输入框的事件委托和状态同步。


















