Kibo 用于处理键盘事件的Javascript工具库


Posted in Javascript onOctober 28, 2011

入门
Kibo不依赖任何东西。你只要把它放到你的HTML代码里就行了:

<script type="text/javascript" src="kibo.js"></script>

下载 kibo.js
创建一个Kibo对象实例,事件监听器就建立起来了:
var k = new Kibo();

Kibo对象的构造器有一个可选参数——你指定的接收事件的HTML元素。可以是input, textarea 或 select,缺省情况下是window.document。

语法和用法
本工具库提供了两个简单的方法——down and up, 它们都接收两个参数:一个按键或多个按键的组合或通配符,以及一个当有匹配的按键事件发生时调用的函数。这两个方法都可以链式调用。

按键组合是指控制键和字符键的组合,或者简单的是一个或多个控制键。你可以向这两个方法传入单个或一个数组形式的多个组合键。

当函数被调用时,事件将被传入这个函数。如果你的事件没有什么操作,忽略就行了。如果函数返回了false,事件的缺省操作将被阻止。

Kibo里提供了一个lastKey方法,用来查询最后一次键盘事件是由什么键产生的。它会返回键的名称,如果在最后的一次按键是不支持的键,方法将返回undefined。除此之外,你还可以用lastKey判断是否是某个特定的功能键被按下,它会要么返回true 要么返回 false。

受支持的按键
Kibo 支持下面的这些按键,拼写这些按键名时不区分大小写:

控制键 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

通配符 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);

通配符
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; });

License
Kibo is released under the MIT License.
Javascript 相关文章推荐
JS代码放在head和body中的区别分析
Dec 01 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
javascript入门之数组[新手必看]
Nov 21 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
JavaScript显式数据类型转换详解
Mar 18 Javascript
stream.js 一个很小、完全独立的Javascript类库
Oct 28 #Javascript
能说明你的Javascript技术很烂的五个原因分析
Oct 28 #Javascript
基于jquery的滚动鼠标放大缩小图片效果
Oct 27 #Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 #Javascript
VBS通过WMI监视注册表变动的代码
Oct 27 #Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 #Javascript
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 #Javascript
You might like
一个更简单的无限级分类菜单代码
2007/01/16 PHP
PHP无限分类(树形类)
2013/09/28 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
初识PHP中的Swoole
2016/04/05 PHP
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
JavaScript原型链示例分享
2014/01/26 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
AngularJS使用ng-repeat遍历二维数组元素的方法详解
2017/11/11 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
python+selenium实现京东自动登录及秒杀功能
2017/11/18 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python实现批量读取图片并存入mongodb数据库的方法示例
2018/04/02 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
更新升级python和pip版本后不生效的问题解决
2020/04/17 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
Python configparser模块应用过程解析
2020/08/14 Python
求职自荐信格式
2013/12/04 职场文书
房地产项目建议书
2014/03/12 职场文书
学生会主席演讲稿
2014/04/25 职场文书
活动总结结尾怎么写
2014/08/30 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
2015年学校党建工作总结
2015/05/19 职场文书
不同意离婚上诉状
2015/05/23 职场文书
红高粱观后感
2015/06/10 职场文书