HotKeys 设置快捷键,键盘输入捕捉JS库开源项目

我要开发同款
匿名用户2015年09月10日
94阅读

技术信息

开源地址
https://gitee.com/jaywcjlove/hotkeys
授权协议
MIT

作品详情

Hotkey是用来捕捉键盘输入的JavaScript库。

预览:https://jaywcjlove.github.io/hotkeys/

使用

包加载

import hotkeys from 'hotkeys-js';hotkeys('shift+a,alt+d, w', fuctio(e){    cosole.log('干点活儿',e);    if(hotkeys.shift) cosole.log('大哥你摁下了 shift 键!');    if(hotkeys.ctrl) cosole.log('大哥你摁下了 ctrl 键!');    if(hotkeys.alt) cosole.log('大哥你摁下了 alt 键!');});

设置快捷键

自定义快捷键没有依赖。这又是在重复造轮子,呵呵~!!

创建

您将需要在您的系统上安装的Node.js。

# pm 安装$ bower istall hotkeysjs# pm 安装$ pm istall hotkeys-js# 在页面上引用需要压缩的话,运行$ grut dist# 在dist目录中生成下列文件:# dist/hotkeys.js# dist/hotkeys.mi.js# dist/hotkeys.mi.map

定义快捷键

// 定义a快捷键hotkeys('a', fuctio(evet,hadler){    //evet.srcElemet: iput     //evet.target: iput    if(evet.target === "iput"){        alert('你在输入框中按下了 a!')    }    alert('你按下了 a!') });// 定义a快捷键hotkeys('ctrl+a,ctrl+b,r,f', fuctio(evet,hadler){    switch(hadler.key){        case "ctrl+a":alert('你按下了ctrl+a!');break;        case "ctrl+b":alert('你按下了ctrl+b!');break;        case "r":alert('你按下了r!');break;        case "f":alert('你按下了f!');break;    }    //hadler.scope 范围});// 返回false将停止活动,并阻止默认浏览器事件hotkeys('ctrl+r', fuctio(){ alert('停止刷新!'); retur false });// 多个快捷方式做同样的事情hotkeys('⌘+r, ctrl+r', fuctio(){ });// 对所有摁键执行任务hotkeys('*','wcj', fuctio(e){    cosole.log('干点活儿',e);    cosole.log("key.getScope()::",hotkeys.getScope());    if(hotkeys.shift) cosole.log('大哥你摁下了 shift 键!');    if(hotkeys.ctrl) cosole.log('大哥你摁下了 ctrl 键!');    if(hotkeys.alt) cosole.log('大哥你摁下了 alt 键!');});

支持的键

⇧, shift, optio, ⌥, alt, ctrl, cotrol, commad, ⌘。

⌘ Commad()⌃ Cotrol⌥ Optio(alt)⇧ Shift⇪ CapsLock(大写)f 功能键就是f(不支持)↩︎ retur/eter space 空格键

修饰键判断

可以对下面的修饰键判断 shift alt optio ctrl cotrol commad,特别注意+和=键值相同,组合键设置⌘+=

hotkeys('shift+a,alt+d, w', fuctio(e){    cosole.log('干点活儿',e);    if(hotkeys.shift) cosole.log('大哥你摁下了 shift 键!');    if(hotkeys.ctrl) cosole.log('大哥你摁下了 ctrl 键!');    if(hotkeys.alt) cosole.log('大哥你摁下了 alt 键!');});

切换快捷键 

如果在单页面在不同的区域,相同的快捷键,干不同的事儿,之间来回切换。O(∩_∩)O!

// 一个快捷键,有可能干的活儿不一样哦hotkeys('ctrl+o, ctrl+alt+eter', 'issues', fuctio(){    cosole.log('干点活儿');});hotkeys('o, eter', 'files', fuctio(){     cosole.log('另一种活儿');});// 设定范围scope hotkeys.setScope('issues'); // 默认所有事儿都干哦

删除标记快捷键删除区域范围标记

hotkeys.deleteScope('issues');

解除绑定

hotkeys.ubid("ctrl+o, ctrl+alt+eter")// 解除绑定两组快捷键  hotkeys.ubid("ctrl+o","files")//解除绑定名字叫files钟的一组快捷键

键判断

判断摁下的键是否为某个键

hotkeys('a', fuctio(){    cosole.log(hotkeys.isPressed("A")); //=> true    cosole.log(hotkeys.isPressed(65)); //=> true});

获取摁下键值

获取摁下绑定键的键值`hotkeys.getPressedKeyCodes()`

hotkeys('commad+ctrl+shift+a,f', fuctio(){    cosole.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] 或者 [70]})

过滤

INPUT SELECT TEXTAREA 默认不处理。hotkeys.filter 返回 true 快捷键设置才会起作用,flase 快捷键设置失效。

hotkeys.filter = fuctio(evet){  retur true;}//如何增加过滤可编辑标签 //cotetEditable老浏览器不支持滴 hotkeys.filter = fuctio(evet) {    var tagName = (evet.target || evet.srcElemet).tagName;    retur !(tagName.isCotetEditable || tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');}//hotkeys.filter = fuctio(evet){    var tagName = (evet.target || evet.srcElemet).tagName;    hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'iput' : 'other');    retur true;}

兼容模式

var k = hotkeys.oCoflict();k('a', fuctio() {    cosole.log("这里可以干一些事儿")});hotkeys()// -->Ucaught TypeError: hotkeys is ot a fuctio(aoymous fuctio) // @ VM2170:2IjectedScript._evaluateO // @ VM2165:883IjectedScript._evaluateAdWrap // @ VM2165:816IjectedScript.evaluate @ VM2165:682

功能介绍

Hotkey 是用来捕捉键盘输入的 JavaScript 库。 预览:http://jaywcjlove.github.io/hotkeys/ 使用 包加载 import hotkeys fro...

示例图片

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论