`
jsczxy2
  • 浏览: 1277558 次
  • 性别: Icon_minigender_1
  • 来自: 常州
文章分类
社区版块
存档分类
最新评论

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

阅读更多

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 {
2 'type':'keydown',
3 'propagate':false,
4 'disable_in_input':true,
5 'target':document,
6 'keycode':65
7 }

示例:

1 shortcut.add("Ctrl+B",function() {
2 alert("The bookmarks of your browser will show up after this alert...");
3 },{
4 'type':'keydown',
5 'propagate':true,
6 '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元素。可以是inputtextarea 或 select,缺省情况下是window.document

语法和用法

本工具库提供了两个简单的方法——down and up, 它们都接收两个参数:一个按键或多个按键的组合或通配符,以及一个当有匹配的按键事件发生时调用的函数。这两个方法都可以链式调用。

按键组合是指控制键和字符键的组合,或者简单的是一个或多个控制键。你可以向这两个方法传入单个或一个数组形式的多个组合键。

当函数被调用时,事件将被传入这个函数。如果你的事件没有什么操作,忽略就行了。如果函数返回了false,事件的缺省操作将被阻止。

Kibo里提供了一个lastKey方法,用来查询最后一次键盘事件是由什么键产生的。它会返回键的名称,如果在最后的一次按键是不支持的键,方法将返回undefined。除此之外,你还可以用lastKey判断是否是某个特定的功能键被按下,它会要么返回true 要么返回 false

受支持的按键

Kibo 支持下面的这些按键,拼写这些按键名时不区分大小写:

  • 控制键 shiftctrlalt

  • 字母键 从a 到 z

  • 数字键 从0 到 9

  • 功能键 从f1 到 f12

  • 方向键 leftuprightdown

  • enterescspacebackspacedeleteinserttabpage_uppage_downhomeendcaps_locknum_lock

  • 通配符 anyany arrowany numberany letterany 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/

分享到:
评论

相关推荐

    JS 流程图 流程图插件

     跨浏览器,可兼容IE7--IE10, FireFox, Chrome, Opera等几大内核的浏览器,且不需要浏览器再加装任何控件。  多系统兼容性、可移植性:由于只包括前台UI,因此二次开发者可很方便将本插件用在任何一种需要流程...

    javascript实现中文输入法

    4. **事件监听**:JavaScript需要监听键盘事件,捕捉用户的输入,然后解析拼音并展示候选词。这涉及到事件处理函数,如`addEventListener`,以及对键盘事件的处理逻辑。 5. **浏览器兼容性**:由于JavaScript的运行...

    移动端可触摸的轮播图(纯js插件)

    1. **事件监听**:考虑到移动端用户主要通过触摸屏幕进行交互,插件会监听`touchstart`、`touchmove`和`touchend`等触摸事件,以捕捉用户的滑动操作并执行相应的轮播动画。 2. **CSS3动画**:为了实现平滑的过渡...

    tab选项卡插件(6星级)

    使用这类插件通常涉及以下步骤:引入插件的CSS和JS文件,设置HTML结构,然后通过JavaScript初始化插件,配置参数。 5. **插件的灵活性**:6星级的选项卡插件通常具备高度可定制性,允许开发者调整样式、布局、动画...

    键盘钩子动态dll(bcb)

    为了确保这个DLL能在所有浏览器中工作,开发者需要考虑不同浏览器之间的差异,包括它们的渲染引擎、JavaScript API以及对插件或扩展的支持。实现这样的兼容性通常需要广泛测试和灵活的编程策略。 5. **文字输入...

    我的资源手写插件

    在传统的键盘和鼠标输入之外,手写输入为用户提供了额外的便利。 【描述】"手写系统,处于研发阶段,请勿下载,可能会导致系统不稳定"提示我们这个软件目前还未完成开发,可能存在不稳定性,因此不适合普通用户下载...

    vue前端截图插件electron的

    Vue.js 是一款非常流行的前端JavaScript框架,用于构建用户界面。在Vue应用中,有时我们需要实现类似于QQ截图那样的功能,这通常涉及到与后端交互、图像处理以及可能的桌面应用程序集成。 Electron 是一个强大的开源...

    JavaScript跑酷小游戏源代码

    这个源代码包提供了一款完整的跑酷游戏的实现,是学习和理解JavaScript编程、DOM操作、事件处理以及游戏逻辑设计的良好实践素材。 首先,我们要知道JavaScript是一种广泛用于网页和网络应用的脚本语言,它在浏览器...

    打字键盘发声

    - 事件监听:在编程中,需要设置键盘事件监听器,捕捉用户的键盘输入。在JavaScript、Python、C#等语言中都有相应的API可以实现。 - 音频处理:声音的播放通常涉及到音频库的使用,如Java的javax.sound或Python的...

    sketch-plugin-snap-to-8pt-grid:一个Sketch插件,可帮助将图层属性捕捉到8点网格

    捕捉到8pt网格一个Sketch插件,可帮助将图层属性捕捉到8点网格。 也可以更改为其他点网格,例如10点网格。 可以通过插件菜单的设置进行更改...要做/想法的捕捉路径添加键盘快捷键更改pt / px的捕捉数量(例如10pt网格)

    Chrome Gestures 鼠标手势插件说明

    除了上述预设的手势操作外,Chrome Gestures插件还允许用户自定义手势捕捉时间和双击延时时间等参数,从而更加贴合个人的操作习惯。此外,当执行手势时,插件还会提供箭头提示来指示手势的方向,增强了用户体验。 #...

    Js软键盘

    【Js软键盘】是一种在网页上实现的模拟真实物理键盘的功能,主要应用于在线表单填写,尤其是涉及到用户隐私数据如密码、银行卡号等输入时,为提高安全性而设计。它通常基于JavaScript和jQuery库来创建,利用jQuery的...

    minicolors颜色选择器插件

    minicolors是一款轻量级、可自定义的颜色选择器插件,广泛应用于前端开发领域。本文将详细探讨minicolors的特性、使用方法及其实现原理,旨在帮助开发者更好地理解和应用这个工具。 ### 一、minicolors简介 ...

    jquery Tab 选项卡插件

    5. **无障碍访问**:考虑到无障碍访问,插件通常会遵循WCAG(Web Content Accessibility Guidelines)标准,确保键盘导航和屏幕阅读器兼容性。 6. **响应式设计**:现代的jQuery Tab插件往往具备响应式设计,自动...

    jQuery网页滑块验证码插件特效源码.zip

    【jQuery网页滑块验证码插件特效源码】是一款基于JavaScript库jQuery实现的网页验证机制,旨在提高网站安全性,防止自动机器人或恶意攻击。滑块验证码通常由一张被部分遮挡的图片组成,用户需要通过手动拖动滑块来...

    JS Drum Kit-crx插件

    2. **事件监听**:JavaScript的事件监听机制用于捕捉用户的键盘输入,当检测到特定按键按下时,对应的音频源被激活,播放对应的鼓声。 3. **音效合成**:通过控制音频节点的参数,如增益、混响、延迟等,可以调整...

    HTML5相册插件ma5gallery.zip

    利用jQuery的键盘事件监听,可以捕捉到用户的键盘输入,如左箭头和右箭头键,然后相应地改变当前显示的图片。 至于1191这个文件名,它可能是压缩包中的一个文件或目录,具体用途可能是包含插件的主要源代码、样式表...

    坦克大战纯JS源码

    JS源码会设置事件监听器,捕捉用户的输入,然后根据输入调整坦克的移动方向、发射子弹等。 四、对象与数据结构 游戏中的坦克、子弹、砖块等都可以看作是对象,每个对象都有自己的属性(如位置、速度、生命值等)和...

    打飞机小游戏原生javascript版

    例如,使用JavaScript可以监听键盘事件,捕捉玩家的操作;通过定时器(setInterval或requestAnimationFrame)实现游戏的连续更新,使飞机和子弹能够动起来;同时,JavaScript还负责计算碰撞检测,判断子弹是否击中了...

    js时间控件只显示年月,目前测试支持多版本的浏览器

    在JavaScript编程中,时间控件通常用于用户交互中选择日期或时间。对于只显示年月的时间控件,这种设计可以简化界面,使用户专注于选择年份和月份,而不需要考虑具体的日期。在这种场景下,创建一个兼容多版本浏览器...

Global site tag (gtag.js) - Google Analytics