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增加each方法
Apr 07 Javascript
js调试工具Console命令详解
Oct 21 Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
Dec 03 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
基于Swiper实现移动端页面图片轮播效果
Dec 28 Javascript
js根据json数据中的某一个属性来给数据分组的方法
Oct 08 Javascript
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
js实现图片无缝循环轮播
Oct 28 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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
PHP简单实现断点续传下载的方法
2015/09/25 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
javascript基本语法分析说明
2008/06/15 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
jquery实现可拖动DIV自定义保存到数据的实例
2013/11/20 Javascript
javascript 事件处理示例分享
2014/12/31 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
vue采用EventBus实现跨组件通信及注意事项小结
2018/06/14 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
vue实现路由切换改变title功能
2019/05/28 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
解决echarts 一条柱状图显示两个值,类似进度条的问题
2020/07/20 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
python函数缺省值与引用学习笔记分享
2013/02/10 Python
python实现字符串和字典的转换
2018/09/29 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python的debug实用工具 pdb详解
2019/07/12 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
中国好声音华少广告词
2014/03/17 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
社区低保工作总结2015
2015/07/23 职场文书
演讲稿:态度决定一切
2019/04/02 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server