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中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
纯JS代码实现气泡效果
May 04 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
bootstrap table使用入门基本用法
May 24 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
微信小程序开发背景图显示功能
Aug 08 Javascript
3分钟了解vue数据劫持的原理实现
May 01 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 Javascript
jQuery实现简易聊天框
Feb 08 jQuery
vue 调用 RESTful风格接口操作
Aug 11 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
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
php网站地图生成类示例
2014/01/13 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
javascript读写json示例
2014/04/11 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
WEB前端实现裁剪上传图片功能
2016/10/17 Javascript
详解如何使用Vue2做服务端渲染
2017/03/29 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
vue 表单之通过v-model绑定单选按钮radio
2019/05/13 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
vuex存储token示例
2019/11/11 Javascript
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
Python列表删除的三种方法代码分享
2017/10/31 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python创建或生成列表的操作方法
2019/06/19 Python
python爬虫 正则表达式解析
2019/09/28 Python
Python程序暂停的正常处理方法
2019/11/07 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
体育教育毕业生自荐信
2013/11/21 职场文书
物流仓管员工作职责
2014/01/06 职场文书
倡议书格式模板
2014/05/13 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书