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 关闭IE6、IE7
Jun 01 Javascript
jQuery 版元素拖拽原型代码
Apr 25 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JavaScript自学笔记(必看篇)
Jun 23 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
webpack入门必知必会
Jan 16 Javascript
整理一些最近经常遇到的前端面试题
Apr 25 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
Jan 09 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
手把手带你封装一个vue component第三方库
Feb 14 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 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
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP Socket 编程
2010/04/09 PHP
用php解析html的实现代码
2011/08/08 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
判断目标是否是window,document,和拥有tagName的Element的代码
2010/05/31 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
2011/12/29 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
jQuery实现Tab选项卡切换效果简单演示
2015/11/23 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
2015/12/31 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
js实现文本上下来回滚动
2017/02/03 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
js实现动态添加上传文件页面
2018/10/22 Javascript
vue项目中引入Sass实例方法
2019/08/27 Javascript
JS工厂模式开发实践案例分析
2019/10/17 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
编写Python CGI脚本的教程
2015/06/29 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
中学生运动会入场词
2014/02/12 职场文书
年度献血先进个人事迹材料
2014/02/14 职场文书
材料加工工程求职信
2014/02/19 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
三方股东合作协议书范本
2014/09/28 职场文书
2016年教师新年寄语
2015/08/18 职场文书