设置快捷键

js简单的设置快捷键，hotkeys捕获键盘键和组合键的输入

这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键，它没有依赖，压缩只有只有(~3kb)。

创建

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

 # bower 安装

 $ bower install hotkeysjs

 # npm 安装

 $ npm install hotkeys-js

 # 在页面上引用需要压缩的话，运行

 $ grunt dist

 # 在dist目录中生成下列文件：

 # dist/hotkeys.js

 # dist/hotkeys.min.js

 # dist/hotkeys.min.map

定义快捷键

 // 定义a快捷键

 hotkeys('a', function(event,handler){

     //event.srcElement: input

     //event.target: input

     if(event.target === "input"){

         alert('你在输入框中按下了 a!')

     }

     alert('你按下了 a!')

 });

 // 定义a快捷键

 hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){

     switch(handler.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;

     }

     //handler.scope 范围

 });

 // 返回false将停止活动，并阻止默认浏览器事件

 hotkeys('ctrl+r', function(){ alert('停止刷新!'); return false });

 // 多个快捷方式做同样的事情

 hotkeys('⌘+r, ctrl+r', function(){ });

 // 对所有摁键执行任务

 hotkeys('*','wcj', function(e){

     console.log('干点活儿',e);

     console.log("key.getScope()::",hotkeys.getScope());

     if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');

     if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');

     if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');

 });

支持的键

⇧, shift, option, ⌥, alt, ctrl, control, command, ⌘。

⌘ Command()

⌃ Control

⌥ Option(alt)

⇧ Shift

⇪ Caps Lock(大写)

fn 功能键就是fn(不支持)

↩︎ return/Enter

space 空格键

修饰键判断

可以对下面的修饰键判断 shift alt option ctrl control command

 hotkeys('shift+a,alt+d, w', function(e){

     console.log('干点活儿',e);

     if(hotkeys.shift) console.log('大哥你摁下了 shift 键！');

     if(hotkeys.ctrl) console.log('大哥你摁下了 ctrl 键！');

     if(hotkeys.alt) console.log('大哥你摁下了 alt 键！');

 });

切换快捷键

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

 // 一个快捷键，有可能干的活儿不一样哦

 hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){

     console.log('干点活儿');

 });

 hotkeys('o, enter', 'files', function(){

     console.log('另一种活儿');

 });

 // 设定范围scope

 hotkeys.setScope('issues'); // 默认所有事儿都干哦

删除标记快捷键

删除区域范围标记

hotkeys.deleteScope('issues');

解除绑定

 hotkeys.unbind("ctrl+o, ctrl+alt+enter") 解除绑定两组快捷键

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

键判断

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

 hotkeys('a', function(){

     console.log(hotkeys.isPressed("A")); //=> true

     console.log(hotkeys.isPressed(65)); //=> true

 });

获取摁下键值

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

 hotkeys('command+ctrl+shift+a,f', function(){

     console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] 或者 [70]

 })

过滤

INPUT SELECT TEXTAREA 默认不处理。

hotkeys.filter 返回 true 快捷键设置才会起作用，flase 快捷键设置失效。

 hotkeys.filter = function(event){

   return true;

 }

 //如何增加过滤可编辑标签 <div contentEditable="true"></div>

 //contentEditable老浏览器不支持滴

 hotkeys.filter = function(event) {

     var tagName = (event.target || event.srcElement).tagName;

     return !(tagName.isContentEditable ||

     tagName == 'INPUT' ||

     tagName == 'SELECT' ||

     tagName == 'TEXTAREA');

 }

 //

 hotkeys.filter = function(event){

     var tagName = (event.target || event.srcElement).tagName;

     hotkeys.setScope(/^(INPUT|TEXTAREA|SELECT)$/.test(tagName) ? 'input' : 'other');

     return true;

 }

兼容模式

 var k = hotkeys.noConflict();

 k('a', function() {

     console.log("这里可以干一些事儿")

 });

 hotkeys()

 // -->Uncaught TypeError: hotkeys is not a function(anonymous function)

 // @ VM2170:2InjectedScript._evaluateOn

 // @ VM2165:883InjectedScript._evaluateAndWrap

 // @ VM2165:816InjectedScript.evaluate @ VM2165:682

秒客网