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下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
JS实现随机抽选获奖者
Nov 07 Javascript
js实现选项卡效果
Mar 07 Javascript
javascript实现数字时钟效果
Feb 06 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 文件上传功能实现代码
2009/06/24 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
解析PHP中的正则表达式以及模式匹配
2013/06/19 PHP
php检测网页是否被百度收录的函数代码
2013/10/09 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
PHP7 list() 函数修改
2021/03/09 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
JavaScript获取网页支持表单字符集的方法
2015/04/02 Javascript
原生js页面滚动延迟加载图片
2015/12/20 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
python中的多重继承实例讲解
2014/09/28 Python
python获取文件扩展名的方法
2015/07/06 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
深入理解Python对Json的解析
2017/02/14 Python
Python实现的单向循环链表功能示例
2017/11/10 Python
浅谈使用Python内置函数getattr实现分发模式
2018/01/22 Python
Django学习教程之静态文件的调用详解
2018/05/08 Python
Python绘制全球疫情变化地图的实例代码
2020/04/20 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
“型”走纽约上东区:Sam Edelman
2017/04/02 全球购物
师范生自荐信
2013/10/27 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
群众路线教育党课主持词
2014/04/01 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android
处理canvas绘制图片模糊问题
2022/05/11 Javascript