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 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
JS截取字符串常用方法整理及使用示例
Oct 18 Javascript
Javascript变量作用域详解
Dec 06 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
JavaScript函数节流概念与用法实例详解
Jun 20 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
node使用Mongoose类库实现简单的增删改查
Nov 08 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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 代码优化之经典示例
2011/03/24 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
javascript中关于break,continue的特殊用法与介绍
2012/05/24 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
JS表格组件神器bootstrap table详解(基础版)
2015/12/08 Javascript
easyui validatebox验证
2016/04/29 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
JS常见简单正则表达式验证功能小结【手机,地址,企业税号,金额,身份证等】
2017/01/22 Javascript
ES6实现的遍历目录函数示例
2017/04/07 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
React Native 环境搭建的教程
2017/08/19 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
2018/08/24 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
Python学习笔记之os模块使用总结
2014/11/03 Python
python数据类型_字符串常用操作(详解)
2017/05/30 Python
Python单例模式的两种实现方法
2017/08/14 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
HTML5时代CSS设置漂亮字体取代图片
2014/09/04 HTML / CSS
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
企业办公室主任岗位职责
2014/02/19 职场文书
销售经理竞聘书
2014/03/31 职场文书
小学生新年寄语
2014/04/03 职场文书
生日寄语大全
2014/04/08 职场文书
关于旅游的活动方案
2014/08/15 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
Nginx访问日志及错误日志参数说明
2021/03/31 Servers