几款js键盘捕捉插件[转]

最新推荐文章于 2025-05-07 10:40:48 发布

iteye_12411

最新推荐文章于 2025-05-07 10:40:48 发布

阅读量418

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_12411/article/details/82434450

javascript 专栏收录该内容

45 篇文章

订阅专栏

1、shortcut.js

下载地址：http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js

下面内容主要为官方文档的翻译，但也加入了一些我的理解。

使用说明

该类主要有两个方法组成：shortcut.add()、shortcut.remove()，下面分别介绍：

shortcut.add(key,func,options)

该方法有三个参数：

key :要设置的快捷键，比如”CTRL+A”，书写形式为 :功能键[+功能键..]+其他键。详情见下面支持键列表；

func: 响应快捷键的函数，当快捷键按下时，将执行该函数；

options: 配置参数，以关联数组形式填写，参数包括下面几个：

type – String

事件类型 – 可以是’keydown’,'keyup’,'keypress’。默认为 ‘keydown’

disable_in_input – Boolean

是否在输入表单时屏蔽快捷键 – 如果该项设置为true，当光标焦点在input或textarea时，快捷键将屏蔽。这项功能是非常有用的，特别是当我们设置的快捷键只需按一个键时。该项默认为false

target – DOM Node

响应快捷键的元素范围。默认为 : document

propagate – Boolean

是否允许继承? 默认 : false

keycode – Integer

监视的键盘编码。比如, 编码’65′ 为按键 ‘a’.

options参数示例：

 
   1{
 
'type':'keydown', 
 
'propagate':false, 
 
'disable_in_input':true, 
 
'target':document, 
 
'keycode':65 
 
   7}

示例：

 
shortcut.add("Ctrl+B",function() { 
 
alert("The bookmarks of your browser will show up after this alert..."); 
 
   3},{
 
'type':'keydown', 
 
'propagate':true, 
 
'target':document 
 
   7});

shortcut.remove()

只有一个参数，即前面设置的的快捷键组合。确保跟前面设置的快捷键组合是一样的，比如我们前面shortcut.add()的第一个参数为“CTRL+A”，此处也必须为“CTRL+A”。

示例：

 
   1 shortcut.add("Ctrl+B",function() { 
 
   2 alert("Bold"); 
 
   3});
 
   4//Remove the shortcut
 
   5 shortcut.remove("Ctrl+B");

支持的键：

快捷键必须是下面的形式：

功能键[+功能键..]+其他键

比如：

Ctrl+A

支持的功能键有
* Ctrl
* Alt
* Shift
* Meta

功能键可以省略，比如设置快捷键X：

 
   1 shortcut.add("X",function() { 
 
   2 alert("Hello!"); 
 
   3});

其他允许的键：
* 所有数字、字母键 – abc…xyz,01..89
* 特殊字符-任何标准键盘上的特殊字符都可以
* 特殊按键…
o Tab
o Space
o Return
o Enter
o Backspace
o Scroll_lock
o Caps_lock
o Num_lock
o Pause
o Insert
o Home
o Delete
o End
o Page_up
o Page_down
o Left
o Up
o Right
o Down
o F1
o F2
o F3
o F4
o F5
o F6
o F7
o F8
o F9
o F10
o F11
o F12

所有这些按键都是不区分大小写的，可以放心填写。

2、Kibo

Kibo是一个简单的用于处理键盘事件的Javascript工具库。

入门

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.

3、KeyboardJS

又是一款很不错的JS，直接见demo：

http://robertwhurst.github.com/KeyboardJS/