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 判断 enter 事件
Feb 12 Javascript
EditPlus注册码生成器(js代码实现)
Mar 25 Javascript
js实现简单鼠标跟随效果的方法
Apr 10 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
Ajax验证用户名或昵称是否已被注册
Apr 05 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
解决await在forEach中不起作用的问题
Feb 25 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
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
学习php开源项目的源码指南
2014/12/21 PHP
php 遍历目录,生成目录下每个文件的md5值并写入到结果文件中
2016/12/12 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
imagettftext() 失效,不起作用
2021/03/09 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
JavaScript中奇葩的假值示例应用
2014/03/11 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
AngularJS表单详解及示例代码
2016/08/17 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
微信小程序Redux绑定实例详解
2017/06/07 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
elementUi vue el-radio 监听选中变化的实例代码
2019/06/28 Javascript
Vue使用预渲染代替SSR的方法
2020/07/02 Javascript
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python使用pymysql小技巧
2017/06/04 Python
flask中的wtforms使用方法
2018/07/21 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python实现指定ip端口扫描方式
2019/12/17 Python
Python使用pyyaml模块处理yaml数据
2020/04/14 Python
opencv 图像滤波(均值,方框,高斯,中值)
2020/07/08 Python
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
XML文档面试题
2015/08/05 面试题
Python是如何进行类型转换的
2013/06/09 面试题
成人成长感言如何写?
2019/08/16 职场文书
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
go xorm框架的使用
2021/05/22 Golang
Python实现天气查询软件
2021/06/07 Python