JavaScript 实现键盘方向键翻页功能
本文介绍如何使用 JavaScript 监听键盘方向键实现网页内容的左右翻页功能。通过正则表达式提取页面中“上一页”和“下一页”链接的 href 属性,结合 onkeydown 事件处理逻辑,在用户按下左或右方向键时自动跳转至对应页面。代码包含对输入框等焦点元素的判断,避免在编辑时触发翻页。
JavaScript 实现键盘方向键翻页功能
今日从网络获取此功能,颇具价值,日后可在文章内集成该功能。
var re = /<a href=[\"\']?([-=\w\.\/\?]+)[\"\']?>[\[\(<]?上一页[\]\)>]?<\/a>/igm;
if (window.document.body.innerHTML.search(re) >= 0) {
var PREVIOUS_PAGE = RegExp.$1;
}
若匹配到“上一页”,则定义 var PREVIOUS_PAGE = RegExp.$1;
var re = /<a href=[\"\']?([-=\w\.\/\?]+)[\"\']?>[\[\(<]?下一页[\]\)>]?<\/a>/igm;
if (window.document.body.innerHTML.search(re) >= 0) {
var NEXT_PAGE = RegExp.$1;
}
若匹配到“下一页”,则定义 var NEXT_PAGE = RegExp.$1;
if (typeof PREVIOUS_PAGE == "string" || typeof NEXT_PAGE == "string") {
document.onkeydown = function() {
switch (event.srcElement.tagName) {
case "INPUT":
case "TEXTAREA":
case "SELECT":
break;
default:
if (event.keyCode == 37 /* Arrow Left*/ && typeof PREVIOUS_PAGE == "string") {
window.location.href = PREVIOUS_PAGE;
}
else if (event.keyCode == 39 /* Arrow Right */ && typeof NEXT_PAGE == "string") {
window.location.href = NEXT_PAGE;
}
}
}
}
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别:JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53
