第16章 jQuery键盘操作

第16章jQuery键盘操作一个好的网站，必须有较好的可访问性以及可用性，因此对用户的多方便需求都应该有所考虑。例如用户的系统环境是否支持JavaScript，用户使用的是什么浏览器以及浏览器是什么版本的等。在上面的章节中也陆续对经常用到的可用性设计作了介绍，本章将介绍jQuery如何丰富用户的键盘操作，以此来提高用户访问网站的可用性，同时也提高了网站本身的易用性，使网站可以吸引更多的用户。本章首先介绍在网页上使用键盘快捷键进行网页内容的切换技术，然后使用jQuery来实现一个软键盘，方便用户输入。16.1键盘快捷键动态切换页面快捷键被广泛的应用于各种桌面软件中，如Photoshop、Word等中均有大量的快捷键。使用这些快捷键，可以使用户更方便的进行想要的操作，明显的提高用户的工作效率。因此，掌握快捷键的多少以及使用的熟练程度一度成为辨别该用户是否为高手的根据。本节将介绍如何在网页上设定快捷键，使用该快捷键用户可以更加快速地切换想要看到的页面。16.1.1需求与最终效果快捷键在日常的工作以及学习中会被十分频繁的使用到，不用说存在着很多高级功能快捷键的桌面软件如Photoshop、Word等，单就看看正在使用的操作系统也存在着无数实用的快捷键，如“Windows键+D”用于显示桌面，“Windows键+E”用于打开资源管理器，“Windows键+R”用于打开运行命令窗口等等。16.1.2HTML及CSS代码本章将继续使用本书的测试页面（详见5.4节）进行演示。16.1.3jQuery代码首先实现传统的页面中菜单操作方式，也就是通过鼠标单击各个菜单项进行对应页面内容的显示。在js目录中定义一个新的文件，名称为keypress_nav.js。该例中的jQuery代码将集中放置于此文件中。注意需要在HTML文件中添加下面一行用于导入该JavaScript文件，代码如下：scripttype=text/JavaScriptsrc=js/keypress_nav.js/script16.2使用插件进行改进16.1节中实现了使用键盘的快捷键切换页面内容的效果，但是，这个示例并不是完美无缺的。本节将分析上例中存在的问题，然后介绍一个强大的用于实现jQuery快捷键的插件，并使用该插件解决上例中的问题。16.2.1存在的问题16.1节的示例存在一个致命的硬伤，那就是它使用的是单独的一个按键（“a”、“s”、“d”以及“f”）来设置快捷键，因此如果页面上存在需要输入这些字母的时候，将会出现不期望的结果。16.2.2js-hotkeys插件的使用js-hotkeys插件是一个专门用来设定网页对用户键盘输入响应的插件，可以从其官方网站（）上下载其最近更新，笔者执笔时其最新版本为0.7.8。该插件的使用也十分简单，其调用方式如下：$(expression).bind(types,options,handler);$(expression).unbind(types,options,handler);16.2.2js-hotkeys插件的使用顾名思义，bind函数用于绑定快捷键，unbind函数用于解除某个快捷键的绑定。这两个函数有三个参数，其含义分别如下。1．types：用户按键的操作类型2．options：选项参数3．handler：快捷键响应函数16.2.3使用js-hotkeys插件改进本章示例使用js-hotkeys插件可以很容易地避免上一小节中示例的文本框内容输入与快捷键冲突的问题。16.3软键盘的实现所谓软键盘，就是在电脑屏幕上虚拟显示出来一个键盘布局类似的画面，用户可以使用鼠标来实现与直接使用键盘录入相同的操作。本节介绍使用jQuery来实现软键盘的方法。16.3.1软键盘的使用软键盘之所以叫“软”，其和“软件”的“软”类似。它不像真的键盘一样，是可以摸得着的。它其实可以看作一个软件，只是可以实现和键盘外设一样的功能罢了。软键盘在很多场合都可能被用到，一般出于用户方便使用的考虑或者安全的考虑。最常见的就是输入法自带的软键盘，几乎每个输入法都会有个软键盘的按钮，单击这个按钮，就可以出现一个布局和真实的键盘几乎一模一样的键盘。16.3.1软键盘的使用最常见的就是输入法自带的软键盘，几乎每个输入法都会有个软键盘的按钮，单击这个按钮，就可以出现一个布局和真实的键盘几乎一模一样的键盘。16.3.2准备HTML及CSS代码本节将在本书的测试页面上创建一个登录表单，表单中的一个文本框的输入可以使用软键盘进行录入。16.3.3构建jQuery代码将本节将要实现的jQuery代码定义为一个新的文件，名称为vkeyboard.js，放于js目录中。在HTML文件中添加下面一行用于导入该JavaScript文件，代码如下。scripttype=text/JavaScriptsrc=js/vkeyboard.js/script1.未按下Shift键时的软键盘2.按下Shift键时的软键盘16.3.4最终效果页面加载完毕后单击“软键盘”超链接，页面显示如图16.16所示。16.4小结本章介绍使用jQuery实现与键盘操作相关的功能，首先介绍了如何在网页上使用快捷键进行页面内容的切换，同时介绍了js.hotkeys插件的使用并使用该插件对示例进行了改进操作。然后介绍了使用jQuery来实现软键盘的操作，并使用fieldSelection插件来完成使用软键盘在文本输入框中内容的录入与修改操作。