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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
jQuery 重复加载错误以及修复方法
Dec 16 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
Feb 16 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
vue使用代理解决请求跨域问题详解
Jul 24 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 29 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
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
VFP与其他应用程序的集成
2006/10/09 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php网页病毒清除类
2014/12/08 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
PHP多进程之pcntl_fork的实例详解
2017/10/15 PHP
详解php协程知识点
2018/09/21 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
用apply让javascript函数仅执行一次的代码
2010/06/27 Javascript
js判断滚动条是否已到页面最底部或顶部实例
2014/11/20 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
javascript简单进制转换实现方法
2016/11/24 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
python如何修改装饰器中参数
2018/03/20 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
Python实现密码薄文件读写操作
2019/12/16 Python
对tensorflow中的strides参数使用详解
2020/01/04 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
Clearly新西兰:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
美国在线工具商店:Acme Tools
2018/06/26 全球购物
爱心捐款倡议书范文
2014/05/12 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
结婚通知短信大全
2015/04/17 职场文书
办公室日常管理制度
2015/08/04 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Python多线程 Queue 模块常见用法
2021/07/04 Python