JavaScript 实现键盘方向键翻页功能

作者:青柠

时间:2026-10-21

浏览:654

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


          }
    }
  }
}

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章