彻底禁用跳转输入框的最干净做法是删除 page.layout 数组中的 'skip',使输入框不渲染、dom 不存在;css 隐藏或 js 移除均无效,因 reload 后会恢复,且存在事件隐患。

去掉 layout 中的 skip 项就能彻底禁用跳转输入框
直接删掉 page.layout 数组里的 'skip',输入框就不会渲染,连 DOM 都不存在——这是最干净、无副作用的做法。Layui 的分页栏是“按需生成”,skip 不是样式类名,而是纯前端渲染开关。
常见错误是用 CSS 隐藏 .layui-laypage-skip,这会导致两个问题:一是输入框 DOM 还在,可能被误聚焦或触发键盘事件;二是如果页面有其他逻辑依赖该容器(比如自定义事件委托),容易出意外。
-
layout: ['count', 'prev', 'page', 'next', 'limit']→ 输入框完全不出现 - 保留
'limit'或'refresh'不影响禁用效果,它们各自独立控制 - 即使后端返回了
count和limit,只要没skip,就不会生成输入框
为什么不能靠 CSS 隐藏来“禁止输入”
CSS 隐藏(如 display: none)只管视觉,不管行为。输入框 DOM 仍在,就可能被 focus()、被粘贴内容、甚至被键盘事件监听到——尤其当业务里有全局 keydown 监听或自动聚焦逻辑时,隐患明显。
更关键的是,Layui 在某些场景下会动态重建分页 DOM(比如 table.reload() 后),CSS 规则可能因权重不足或作用域丢失而失效,导致输入框突然“复活”。而删掉 skip 是从源头切断,一劳永逸。
- 不要写
.layui-laypage-skip { display: none !important; } - 也不要用 JS 移除元素:
$('.layui-laypage-skip').remove(),reload 后它又回来 - 禁用目标很明确:不是“不让用户输”,而是“根本不提供输入入口”
如果已启用 skip,但想阻止回车提交
只有启用了 skip 才会有输入框,此时若仍想拦截 Enter 提交,必须手动绑定事件。因为 Layui 默认不响应键盘事件,jump 回调只在点击“跳转”按钮或点击页码时触发。
- 输入框是动态生成的,不能在初始化时直接查
.layui-laypage-jump input - 应在
table.render的done回调或laypage.render的jump回调中,用setTimeout延迟查找并绑定keydown - 判断
e.key === 'Enter'后,必须显式调用laypage.jump(curr)或重新加载数据,不能只改 input 值
注意 reload 时 layout 配置不会自动继承
调用 table.reload() 时,如果不显式传入新的 page 配置,表格会沿用初始化时的 layout。哪怕你之前删掉了 skip,reload 后如果没带 page 参数,输入框可能重新出现。
- 正确写法:
table.reload('demo', { page: { layout: ['count', 'prev', 'page', 'next', 'limit'] } }) - 错误写法:
table.reload('demo')→ layout 回退到初始值 - 如果只是刷新数据不换页,记得带上
page: { curr: table.config.page.curr }避免页码重置











