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 相关文章推荐
Firefox 无法获取cssRules 的解决办法
Oct 11 Javascript
JavaScript 基础篇(一)
Mar 30 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
Javascript中作用域的详细介绍
Oct 06 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
JS数组方法push()、pop()用法实例分析
Jan 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
Smarty的配置与高级缓存技术分享
2012/06/05 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
原生javascript实现DIV拖拽并计算重复面积
2015/01/02 Javascript
创建自己的jquery表格插件
2015/11/25 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
2016/09/27 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
Javascript中的async awai的用法
2017/05/17 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
python中dict()的高级用法实现
2019/11/13 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
Yahoo-PHP面试题2
2014/12/06 面试题
判断单链表中是否存在环
2012/07/16 面试题
介绍下static、final、abstract区别
2015/01/30 面试题
日语系毕业生推荐信
2013/11/11 职场文书
新闻学毕业生自荐信
2013/11/15 职场文书
少年闰土教学反思
2014/02/22 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
Python自动化测试PO模型封装过程详解
2021/06/22 Python
MySQL 外连接语法之 OUTER JOIN
2022/04/09 MySQL
V Rising 服务器搭建图文教程
2022/06/16 Servers