分页容器监听不到onkeydown是因为其html为纯静态链接，无tabindex且不可聚焦；解决方法是给外层容器添加tabindex="0"并监听其keydown事件，避免监听document。
为什么 onkeydown 监听不到分页容器的按键事件
因为分页 HTML 通常是纯静态链接（@#@#@#@#@#@#@#@#@#@0），没有 tabindex，也不聚焦，键盘事件根本不会触发。浏览器默认只对可聚焦元素（如 <input>、<button></button>、带 tabindex 的元素）派发 onkeydown。
解决方法很简单：给分页外层容器加 tabindex="0"，让它能被键盘聚焦；再用 JS 监听其 keydown 事件。不要监听 document——那样会误触表单输入、弹窗等其他场景。
- 确保分页 HTML 包裹在有明确 ID 的容器里，例如：
<div id="pagination" tabindex="0">...</div> - 页面加载后主动聚焦一次（可选）：
document.getElementById('pagination').focus() - 避免同时存在多个
tabindex="0"分页块，否则焦点行为混乱
如何从当前 URL 提取并更新 page 参数
ThinkPHP 分页生成的链接类似 /list?page=3&type=hot 或 /list/4（PATHINFO 模式）。不能硬编码拼接 ?page=，得动态解析。
推荐用 URL API 解析当前地址，再安全地替换或添加 page 查询参数。PATHINFO 模式需额外处理——先判断 URL 是否含 page 查询参数，没有则尝试提取末尾数字作为页码。
- 用
new URL(window.location.href)获取当前 URL 对象，修改searchParams.set('page', next) - 对 PATHINFO 地址（如
/list/5），可用正则/\/(\d+)\/?$/提取末位数字，再用replace()替换 - 跳转前务必检查
next是否在合法范围：next >= 1 && next （<code>totalPages需从模板传入，如{$pages->lastPage()}）
left 和 right 键对应哪两个键码？别用 keyCode
keyCode 已废弃，且不同键盘布局下值不稳定。应该用 event.key——它返回语义化字符串，比如左方向键是 "ArrowLeft"，右方向键是 "ArrowRight"。部分老键盘或笔记本可能触发 "Left"/"Right"，但现代浏览器基本统一为 Arrow*。
- 监听时写
if (e.key === 'ArrowLeft') { ... }，不是e.keyCode === 37 - 加上
e.preventDefault()，防止页面滚动（尤其在容器没溢出时，方向键默认会滚动文档） - 如果用户按住不放，浏览器会自动触发重复 keydown，无需额外节流——分页跳转本身是轻量操作
ThinkPHP 模板中怎么把总页数安全传给 JS
不能在 JS 里直接写 var totalPages = {$pages->lastPage()};，万一模板输出为空或非数字，JS 就报错。也不能用 data- 属性硬塞进 DOM 再读取，太绕。
最稳妥的是用 <script></script> 块内联初始化一个全局配置对象，用 json_encode 转义：
<script>
window.PAGINATION = {
totalPages: {$pages->lastPage()|json_encode},
currentPage: {$pages->currentPage()|json_encode},
baseUrl: '{$Request->url()|raw}' // 确保 URL 不被 HTML 转义
};
</script>
这样 JS 中直接读 window.PAGINATION.totalPages 即可，无 XSS 风险，也兼容中文路径和特殊字符。
注意：如果用了 PJAX 或局部刷新，每次更新分页后要同步重置 window.PAGINATION，否则 JS 仍用旧值。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
