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 相关文章推荐
解析window.open的使用方法总结
Jun 19 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
Apr 11 Javascript
小程序server请求微信服务器超时的解决方法
May 21 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
解决vue addRoutes不生效问题
Aug 04 Javascript
vue使用Sass时报错问题的解决方法
Oct 14 Javascript
js不常见操作运算符总结
Nov 20 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
百事可乐也出咖啡了 双倍咖啡因双倍快乐
2021/03/03 咖啡文化
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
2009/12/07 Javascript
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
ES6使用export和import实现模块化的方法
2018/09/10 Javascript
js监听html页面的上下滚动事件方法
2018/09/11 Javascript
一文读懂ES7中的javascript修饰器
2019/05/06 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
python利用beautifulSoup实现爬虫
2014/09/29 Python
python一键升级所有pip package的方法
2017/01/16 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
利用Python如何生成便签图片详解
2018/07/09 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
详解Python正则表达式re模块
2019/03/19 Python
python opencv 实现对图像边缘扩充
2020/01/19 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
写自荐信有哪些不宜?
2013/10/17 职场文书
资助贫困学生倡议书
2014/05/16 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书
企业培训简报范文
2015/07/20 职场文书
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏