使用js(kibo)监听浏览器键盘事件

2011/10/26 16:59:00 1 Comment

在进行BS系统开发之时,总有客户提出某些按钮应该支持快捷键,甚至整个系统都采用快捷键来进行操作。如果没有一个有效的键盘事件处理的js框架,在每个界面处理不同的键盘事件,是一件非常可怕的事情。幸运的是,老外开发了一个有效的js框架,来监听浏览器中的键盘事件,并提供丰富的事件处理来让开发人员进行界面处理。那就是kibo,一个键盘处理js。
本文为kibo中文教程,直接从kibo官方教程翻译而来,不足之处望谅。

可以从以下网站下载最新的版本:https://github.com/marquete/kibo。整个文件才8k,足够的小,都不需要使用压缩了,而且与jquery也不冲突。它是一个简单地处理键盘事件的js library,没有其它依赖。

语法和使用
kibo主要提供了两个键盘事件的调用函数,down和up,分别表示按键的按下和弹起。这两个函数接收两个参数,一个参数为需要监听的键盘按键集合,包括一个或多个按键,以及表示指定类型的任意一个按键(如*),另一个参数则是处理这个事件的对应函数。kibo提供了像jquery一样的连续调用,你可以使用kibo.down(…).up(…)这样的调用。

可以使用的键盘包括我们普通使用的a-z这些普通按钮,以及特殊的alt,ctrl等控制按键,也包括表示方向键的"up,down,left等,也包括f1和f12这些功能按键。在调用方法时,可以传递一个或多个按键作为相对应的参数。

当处理按键的事件触发时,我们可以在函数中处理这个事件,也可以直接忽略这个事件。如果你想要调用浏览器默认的处理(如f5调用),则可以在回调函数时直接返回false即可。
在回调函数时,我们可以使用kibo.lastKey方法,来获取在键盘事件触发时所对应的按键信息。此方法将返回相对应的按键名称。或者当不识别这个按键时,将返回undefined。如果给这个方法传递一个按键,如kibo.lastKey("shift"),它将返回在这个按键中,是否按下了指定的键,返回true或false。

开始使用
只需要将kibo.js声明在要使用kibo的html中即可以使用了。首先,要创建一个kibo的对象,然后才可以调用它的相应方法,如下所示:

var k = new Kibo();

这个构造函数可以传递一个表示要监视哪个控件的键盘事件,如input,texteare或者select,默认的是window.document。如果传递了相应的控件,则只监视指定的控件,其它的就忽略了。

支持的按键列表(不区分大小写)

  • 辅助按键: shift, ctrl, alt
  • 字母: a 到 z
  • 数字:0 到 9
  • 功能键: f1 到 f12
  • 方向键:left, up, right, down
  • 其它:enter, esc, space, backspace, delete, insert, tab, page_up, page_down, home, end, caps_lock, num_lock
  • kibo扩展: any, any arrow, any number, any letter, any f

例子

首先定义对象:

var k = new Kibo();

单个按键或多个按键:

k.down(['up', 'down'], function() {
  console.log('up or down arrow key pressed');
}).up('tab', function() {
  console.log('TAB key released');
});

功能辅助键:

function handler() {
  console.log('last key: ' + k.lastKey());
}

k.down(['shift q', 'ctrl alt x'], handler);

kibo扩展,支持任意键:

k.down(['any letter', 'any number'], function() {
  console.log('letter or number key pressed');
  console.log('shift key was' + (k.lastKey('shift') ? '' : ' not') + ' pressed');
});

k.up('any', function() {
  console.log('key released');
});

阻止浏览器默认事件:

k.down('f5', function() { return false; });//禁止刷新

版权
基于MIT协议,随便用:)

转载请标明出处:i flym
本文地址:https://www.iflym.com/index.php/code/201110260001.html

相关文章:

已有一个评论

  1. bailey Says:

    恩,不错,就用这个了

留下足迹