JavaScript实现网页键盘控制翻页的多种方案

JavaScript键盘控制翻页概述

本文介绍了一种通过JavaScript实现网页键盘控制翻页的具体方法，供开发者参考。

在许多网站尤其是相册类应用中，通过键盘按键进行上下页切换的效果已较为常见。其核心原理是利用JavaScript监听用户是否按下方向键，从而触发相应的页面跳转逻辑。

以下通过具体示例展示实现方式。

<a id="last" href="<?=$lefturl?>">上一章</a>
<a id="booklist" href="<?=$booklisturl?>">返回目录</a>
<a id="next" href="<?=$righturl?>">下一章</a>

接下来编写对应的JavaScript代码，实现键盘监听与跳转逻辑。

<script language="javascript">
<!--
last=document . getElementById("last").href;
next=document . getElementById("next").href;
booklist=document . getElementById("booklist").href;
function keyUp(e) {
if(navigator.appName == "Microsoft Internet Explorer")
{
var keycode = event.keyCode;
var realkey = String.fromCharCode(event.keyCode);
}else
{
var keycode = e.which;
var realkey = String.fromCharCode(e.which);
}
if(keycode==39){
window.location.href=next;
}
if(keycode==37){
window.location.href=last;
}
if(keycode==13){
window.location.href=booklist;
}
}
document.onkeydown = keyUp;
//-->
</script>

基于正则表达式的动态解析方案

该功能实用性强，适合在文章或内容展示页面中增加此交互体验。

var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?上一页[])>]?</a>/igm;
if (window.document.body.innerHTML.search(re) >= 0) {
var PREVIOUS_PAGE = RegExp.$1;
}

若成功匹配到包含“上一页”字样的链接，则提取其href属性值赋给变量。

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;
}

若成功匹配到包含“下一页”字样的链接，则提取其href属性值赋给变量。

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;
} 
} 
} 
}

跨浏览器兼容性与焦点处理

以下介绍一种实现网页上下翻页快捷键的方法。当用户按下左右方向键时，JavaScript 获取键盘代码并跳转至下一页或上一页。目前网络上的许多代码仅适用于 Internet Explorer，在 Firefox 中无法执行，主要原因在于 Firefox 不支持非标准的 **.click()** 方法。在 IE 中，对 A 标签执行 click 操作会默认跳转至相应网址，而 Firefox 不支持此行为（尽管可以执行 onClick()，但这仅触发 A 标签的 onClick 事件）。

一种简单的跨浏览器解决方案是：在捕获到右方向键时，直接获取下一页A标签的href属性，并将其赋值给window.location.href以实现跳转。

var $=function(id)
{
return document.getElementById(id);
}
var hotKey=function(e)
{
var e =e||event;
var k = e.keyCode||e.which||e.charCode;//获取按键代码
if (k == 37)
    {
if ($("prevPage"))
window.location.href = $("prevPage").href;
    }
else if (k == 39)
    {
if ($("nextPage"))
window.location.href = $("nextPage").href;
    }
else if (k == 72)
    {
if ($("home"))
window.location.href = $("home").href;
    }
}
document.onkeydown = hotKey;//左右键

希望本文提供的基于JavaScript的网页程序设计思路能对读者有所帮助。