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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
May 24 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
Dec 14 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
JavaScript实现拖动对话框效果的实现代码
Oct 12 Javascript
JavaScript中10个Reduce常用场景技巧
Jun 21 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
使用PHP求两个文件的相对路径
2013/06/20 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
javascript开发技术大全-第1章javascript概述
2011/07/03 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
jQuery实现点击某个div打开层,点击其他div关闭层实例分析(阻止冒泡)
2016/11/18 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
Vue2学习笔记之请求数据交互vue-resource
2017/02/23 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
JS实现简单贪吃蛇小游戏
2020/10/28 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
Python入门篇之字符串
2014/10/17 Python
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python3实现从指定路径查找文件的方法
2015/05/22 Python
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
详解Django配置JWT认证方式
2020/05/09 Python
Python Selenium破解滑块验证码最新版(GEETEST95%以上通过率)
2021/01/29 Python
python基于pexpect库自动获取日志信息
2021/02/01 Python
html5构建触屏网站之touch事件介绍
2013/01/07 HTML / CSS
大学生毕业自我鉴定
2013/11/06 职场文书
助人为乐表扬信范文
2014/01/14 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
出生公证委托书
2014/04/03 职场文书
优秀学生干部先进事迹材料
2014/05/26 职场文书
食品安全宣传标语
2014/06/07 职场文书
标准单位租车协议书
2014/09/23 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
个人委托函范文
2015/01/29 职场文书
2016简单的租房合同范本
2016/03/18 职场文书