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 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
原生javascript实现的分页插件pagenav
Aug 28 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
Angular2-primeNG文件上传模块FileUpload使用详解
Jan 14 Javascript
Vue-Router实现页面正在加载特效方法示例
Feb 12 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
Jan 12 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
js实现滑动进度条效果
Aug 21 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
php使用gzip压缩传输js和css文件的方法
2015/07/29 PHP
PHP pear安装配置教程
2016/05/14 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
悄悄用脚本检查你访问过哪些网站的代码
2010/12/04 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
简介BootStrap model弹出框的使用
2016/04/27 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
2017/04/25 Javascript
Angular17之Angular自定义指令详解
2018/01/21 Javascript
vue 页面加载进度条组件实例
2018/02/05 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
layui的layedit富文本赋值方法
2019/09/18 Javascript
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
遗传算法之Python实现代码
2017/10/10 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python实现微信自动回复机器人功能
2019/07/11 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
Python @property装饰器原理解析
2020/01/22 Python
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
端口镜像是怎么实现的
2014/03/25 面试题
数控技术专业推荐信
2013/11/01 职场文书
给排水工程师岗位职责
2013/11/21 职场文书
大学生开西餐厅创业计划书
2014/02/01 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
Python Pandas知识点之缺失值处理详解
2021/05/11 Python