网页的键盘翻页功能

如果文档较长，用户每次阅读到文章末尾，都要回到目录树去点击，才能跳转到下一节。对用户来说，这样的应用就不是特别友好。

如果在每篇文章的末尾，增加到上一节和下一节的链接，就会很方便。如果用户可以通过键盘方向键，按 ← 键回到上一节，按 → 键跳转到下一节，那就更方便了。

我们的网页版 word 就支持键盘翻页功能，只需在文章的末尾增加上一节和下一节的链接，用户可以通过鼠标点击，也可以通过键盘操作进行跳转。HTML代码如下：

1. <a id="prev" href="11.4.1.html"  title="← 键到上一节">上一节</a>
2. <a id="next" href="11.4.3.html"  title="→ 键到下一节">下一节</a>

这里，为上一节和下一节的链接添加了 title 属性，当用户鼠标悬停到链接上时，就会给用户提示 title 属性中的内容。对新用户来说，这个提示尤为重要。

要支持键盘操作，可以让 document 对象来监控键盘的 keydown 事件，并在事件处理函数中获取对应的键盘码，来区分用户按的是哪个键。得到键盘码后，再把链接的 href 属性值赋给 window.location.href 属性，便可以跳转到上一节或下一节。

在定义事件处理函数时，需要注意的是，IE浏览器不支持 function 的参数ev，需要通过 window.event 来获得事件；获得键盘码时，Firefox浏览器不支持 event.keyCode，而要使用 event.which。

为了方便使用，可以把处理过程封装在一个名为 changePage() 的函数中，每个页面直接调用该函数即可。完整代码如下：

1. function changePage() {
2.     $(document).keydown (function(ev) {
3.         var event = window.event || ev;
4.         var code = event.keyCode || event.which;
5.         if(code == 37)  // ← 的键盘码
6.             window.location.href = $("#prev").attr("href");
7.         if(code == 39)  // → 的键盘码
8.             window.location.href = $("#next").attr("href");
9.     });
10. }

需要注意的是，在IE6中，不能保证所有的按键都能被 keydown 事件正确监测到，如果出现这种情况，请尝试使用 keyup 或者 keypress 事件。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。