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 相关文章推荐
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
javascript 事件查询综合 推荐收藏
Mar 10 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
Jun 19 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
JavaScript  cookie 跨域访问之广告推广
Apr 20 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
3分钟掌握常用的JS操作JSON方法总结
Apr 25 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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
php桌面中心(三) 修改数据库
2007/03/11 PHP
discuz程序的PHP加密函数原理分析
2011/08/05 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
46 个非常有用的 PHP 代码片段
2016/02/16 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
深入浅出分析javaScript中this用法
2015/05/09 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
利用Jasmine对Angular进行单元测试的方法详解
2017/06/12 Javascript
微信小程序开发的基本流程步骤
2019/01/31 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
如何分离django中的媒体、静态文件和网页
2019/11/12 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
Aeropostale官网:美国著名校园品牌及青少年服饰品牌
2019/03/21 全球购物
高三自我鉴定怎么写
2013/10/19 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
信息管理应届生求职信
2014/03/07 职场文书
闭幕式主持词
2014/04/02 职场文书
护士先进个人总结
2015/02/13 职场文书
世界名著读书笔记
2015/06/25 职场文书
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle