第16章 jQuery键盘操作

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