设置快捷键

这是一个强健的 Javascript 库用于捕获键盘输入和输入的组合键，它没有依赖，压缩只有只有(~3kb)，gzip:1.9k。hotkey 可以算是临摹参考madrobby/keymaster的作品，重写了一遍，修复多个兼容问题，键支持，添加UMD支持和 测试用例，官方文档DEMO预览 En

  __            __    __
 |  |--..-----.|  |_ |  |--..-----..--.--..-----.
 |     ||  _  ||   _||    < |  -__||  |  ||__ --|
 |__|__||_____||____||__|__||_____||___  ||_____|
                                   |_____|

创建

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

# npm 安装
$ npm install hotkeys-js-alex

$ npm run build # 编译
$ npm run watch # 开发模式

使用

传统调用

<script type="text/javascript" src="./js/hotkeys.js"></script>

包加载

import hotkeys from 'hotkeys-js-alex';

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 键！');
});

定义快捷键

// 定义a快捷键
hotkeys('f5', function(event,handler){
  //event.srcElement: input 
  //event.target: input
  // 阻止Widnows系统下的默认刷新事件
  event.preventDefault() 
  alert('你按下了 F5 键!') 
});
// 定义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', 'scope1', function(){
  console.log('你好看');
});

hotkeys('ctrl_o, enter', 'scope2', function(){ 
  console.log('你好丑陋啊！');
});

// 你摁 “ctrl_o”组合键
// 当scope等于 scope1 ，执行 回调事件打印出 “你好看”，
// 当scope等于 scope2 ，执行 回调事件打印出 “你好丑陋啊！”，

// 通过setScope设定范围scope
hotkeys.setScope('scope1'); // 默认所有事儿都干哦

标记快捷键范围

删除 区域范围标记

hotkeys.deleteScope('scope1');

获取 区域范围标记

hotkeys.getScope('scope1');

设置 区域范围标记

hotkeys.setScope('scope1');

解除绑定

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("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 快捷键设置才会起作用，false 快捷键设置失效。

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