本文介绍如何使用 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;
}
}
}
}