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 相关文章推荐
Jquery 获得服务器控件值的方法小结
May 11 Javascript
javascript权威指南 学习笔记之null和undefined
Sep 25 Javascript
javascript实现div的显示和隐藏的小例子
Jun 25 Javascript
javascript间隔定时器(延时定时器)学习 间隔调用和延时调用
Jan 13 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
基于bootstrap页面渲染的问题解决方法
Aug 09 Javascript
vue路由切换之淡入淡出的简单实现
Oct 31 Javascript
Vue.extend 编程式插入组件的实现
Nov 18 Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 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
论坛头像随机变换代码
2006/10/09 PHP
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
php操作memcache缓存方法分享
2015/06/03 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
基于javascript实现九九乘法表
2016/03/27 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
2018/02/09 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
pandas 获取季度,月度,年度首尾日期的方法
2018/04/11 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python中字典与恒等运算符的用法分析
2019/08/22 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
html5+css3之CSS中的布局与Header的实现
2014/11/21 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
Vuori官网:运动服装的终级表现
2021/01/27 全球购物
main 主函数执行完毕后,是否可能会再执行一段代码,给出说明
2012/12/05 面试题
电信专业应届生自荐信
2013/09/28 职场文书
房地产财务管理制度
2014/02/02 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
一份教室追逐打闹的检讨书
2014/09/27 职场文书
公务员个人总结
2015/02/12 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
2015年大班保育员工作总结
2015/05/18 职场文书
感恩的心主题班会
2015/08/12 职场文书
服务行业标语口号
2015/12/26 职场文书
详解如何修改nginx的默认端口
2021/03/31 Servers
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python