揭秘CSS(第 1 版)
11.4.3 键盘翻页功能
阅读(

概述

CSS选择器

字体和文本

盒模型

元素的定位

链接和导航

表格和表单

变换、过渡和动画

布局

解决跨浏览器问题

构建网页版WORD

布局设计

目录树设计

正文设计

交互性设计

文档结构视图

交互性设计

键盘翻页功能

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

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

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

<a id="prev" href="11.4.1.html"  title="← 键到上一节">上一节</a>
<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() 的函数中,每个页面直接调用该函数即可。完整代码如下:

function changePage() {
    $(document).keydown (function(ev) {
        var event = window.event || ev;
        var code = event.keyCode || event.which;
        if(code == 37)  // ← 的键盘码
            window.location.href = $("#prev").attr("href");
        if(code == 39)  // → 的键盘码
            window.location.href = $("#next").attr("href");
    });
}

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

关于作者

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验