README

安装

Composer

composer require gaomingcode/hotkeys

原始ReadMe

HotKeys.js是一个具有一些特殊功能的输入捕获库，易于上手和使用，占用空间合理（~3kb）（压缩后：1.73kb），并且没有依赖。它不应该与任何JavaScript库或框架冲突。官方文档demo预览。更多示例请点击这里。

╭┈┈╮          ╭┈┈╮  ╭┈┈╮
┆  ├┈┈..┈┈┈┈┈.┆  └┈╮┆  ├┈┈..┈┈┈┈┈..┈┈.┈┈..┈┈┈┈┈.
┆     ┆┆  □  ┆┆   ┈┤┆    < ┆  -__┘┆  ┆  ┆┆__ ┈┈┤
╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈┈╯╰┈┈┴┈┈╯╰┈┈┈┈┈╯╰┈┈┈  ┆╰┈┈┈┈┈╯
                                  ╰┈┈┈┈┈╯

用法

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

$ npm install hotkeys-js --save

import hotkeys from 'hotkeys-js';

hotkeys('f5', function(event, handler){
  // Prevent the default refresh event under WINDOWS system
  event.preventDefault() 
  alert('you pressed F5!') 
});

或者手动下载并链接HTML中的hotkeys.js，也可以通过UNPKG下载。

CDN: UNPKG | jsDelivr | Githack | Statically | bundle.run

<script src="https://unpkg.com/hotkeys-js/dist/hotkeys.min.js"></script>
<script type="text/javascript">
hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
  switch (handler.key) {
    case 'ctrl+a': alert('you pressed ctrl+a!');
      break;
    case 'ctrl+b': alert('you pressed ctrl+b!');
      break;
    case 'r': alert('you pressed r!');
      break;
    case 'f': alert('you pressed f!');
      break;
    default: alert(event);
  }
});
</script>

在React中使用

react-hotkeys是一个React组件，用于监听keydown和keyup键盘事件，定义和分发键盘快捷键。详细的使用方法请参阅其文档react-hotkeys。

react-hotkeys-hook - React hook，用于在组件中使用键盘快捷键。请确保您已安装至少版本16.8的react和react-dom，否则hooks将不会为您工作。

浏览器支持

Hotkeys.js已在以下浏览器中测试过，应该可以正常工作。

Internet Explorer 6+
Safari
Firefox
Chrome

支持按键

HotKeys理解以下修饰键：⇧，shift，option，⌥，alt，ctrl，control，command，和⌘。

以下特殊键可以用于快捷键：backspace，tab，clear，enter，return，esc，escape，space，up，down，left，right，home，end，pageup，pagedown，del，delete和f1至f19。

⌘ 命令()
⌃ 控制键
⌥ 选项(alt)
⇧ Shift
⇪ 大写锁定(Capital)
~~fn 不支持fn~~
↩︎ 回车/Enter空格

定义快捷键

有一个全局方法暴露出来，即key，当直接调用时用于定义快捷键。

hotkeys([keys:<String>], [option:[string|object|function]], [callback:<function>])

hotkeys('f5', function(event, handler) {
  // Prevent the default refresh event under WINDOWS system
  event.preventDefault();
  alert('you pressed F5!');
});

// Returning false stops the event and prevents default browser events
// Mac OS system defines `command + r` as a refresh shortcut
hotkeys('ctrl+r, command+r', function() {
  alert('stopped reload!');
  return false;
});

// Single key
hotkeys('a', function(event,handler){
  //event.srcElement: input 
  //event.target: input
  if(event.target === "input"){
      alert('you pressed a!')
  }
  alert('you pressed a!') 
});

// Key Combination
hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
  switch (handler.key) {
    case 'ctrl+a': alert('you pressed ctrl+a!');
      break;
    case 'ctrl+b': alert('you pressed ctrl+b!');
      break;
    case 'r': alert('you pressed r!');
      break;
    case 'f': alert('you pressed f!');
      break;
    default: alert(event);
  }
});

hotkeys('ctrl+a+s', function() {
    alert('you pressed ctrl+a+s!');
});

// Using a scope
hotkeys('*','wcj', function(event){
  console.log('do something', event);
});

option

scope<字符串>
element
keyup<布尔值>
keydown<布尔值>
splitKey<字符串>（默认为+）

hotkeys('o, enter', {
  scope: 'wcj',
  element: document.getElementById('wrapper'),
}, function(){ 
  console.log('do something else');
});

hotkeys('ctrl-+', { splitKey: '-' }, function(e) {
  console.log('you pressed ctrl and +');
});

hotkeys('+', { splitKey: '-' }, function(e){
  console.log('you pressed +');
})

API参考

星号*

修饰键判断

hotkeys('*', function() {
  if (hotkeys.shift) {
    console.log('shift is pressed!');
  }

  if (hotkeys.ctrl) {
    console.log('ctrl is pressed!');
  }

  if (hotkeys.alt) {
    console.log('alt is pressed!');
  }

  if (hotkeys.option) {
    console.log('option is pressed!');
  }

  if (hotkeys.control) {
    console.log('control is pressed!');
  }

  if (hotkeys.cmd) {
    console.log('cmd is pressed!');
  }

  if (hotkeys.command) {
    console.log('command is pressed!');
  }
});

setScope

使用hotkeys.setScope方法设置作用域。除了'所有'之外，只能有一个活动的作用域。默认情况下'所有'始终处于活动状态。

// Define shortcuts with a scope
hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){
  console.log('do something');
});
hotkeys('o, enter', 'files', function(){ 
  console.log('do something else');
});

// Set the scope (only 'all' and 'issues' shortcuts will be honored)
hotkeys.setScope('issues'); // default scope is 'all'

getScope

使用hotkeys.getScope方法获取作用域。

hotkeys.getScope();

deleteScope

使用hotkeys.deleteScope方法删除一个作用域。这将也会删除与它相关联的所有热键。

hotkeys.deleteScope('issues');

unbind

类似于定义快捷键，它们可以使用 hotkeys.unbind 进行解绑。

// unbind 'a' handler
hotkeys.unbind('a');

// Unbind a hotkeys only for a single scope
// If no scope is specified it defaults to the current scope (hotkeys.getScope())
hotkeys.unbind('o, enter', 'issues');
hotkeys.unbind('o, enter', 'files');

通过函数解绑事件。

function example() {
  hotkeys('a', example);
  hotkeys.unbind('a', example);

  hotkeys('a', 'issues', example);
  hotkeys.unbind('a', 'issues', example);
}

解绑所有事件。

hotkeys.unbind();

isPressed

例如，如果当前按下的是 M 键，则 hotkeys.isPressed(77) 返回 true。

hotkeys('a', function() {
  console.log(hotkeys.isPressed('a')); //=> true
  console.log(hotkeys.isPressed('A')); //=> true
  console.log(hotkeys.isPressed(65)); //=> true
});

keyup

keydown 和 keyup 都会执行回调事件。

hotkeys('ctrl+a,alt+a+s', {keyup: true}, function(event, handler) {
  if (event.type === 'keydown') {
    console.log('keydown:', event.type, handler, handler.key);
  }

  if (event.type === 'keyup') {
    console.log('keyup:', event.type, handler, handler.key);
  }
});

getPressedKeyCodes

返回当前按下的键码数组。

hotkeys('command+ctrl+shift+a,f', function(){
  console.log(hotkeys.getPressedKeyCodes()); //=> [17, 65] or [70]
})

filter

默认情况下，hotkeys 不为 INPUT、SELECT、TEXTAREA 元素启用。使用 Hotkeys.filter 返回到 true 的快捷键集将起作用，false 的快捷键集将设置失败。

hotkeys.filter = function(event){
  return true;
}
//How to add the filter to edit labels. <div contentEditable="true"></div>
//"contentEditable" Older browsers that do not support drops
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;
}

noConflict

放弃 HotKeys 对 hotkeys 变量的控制。

var k = hotkeys.noConflict();
k('a', function() {
  console.log("do something")
});

hotkeys()
// -->Uncaught TypeError: hotkeys is not a function(anonymous function) 
// @ VM2170:2InjectedScript._evaluateOn 
// @ VM2165:883InjectedScript._evaluateAndWrap 
// @ VM2165:816InjectedScript.evaluate @ VM2165:682

开发

要开发，安装依赖项，获取代码

$ git https://github.com/jaywcjlove/hotkeys.git
$ cd hotkeys     # Into the directory
$ npm install    # or  yarn install

要开发，运行自加载构建

$ npm run watch

运行文档网站环境。

$ npm run doc

要贡献，请fork Hotkeys.js，添加您的补丁并为它（在 test/ 文件夹中）添加测试，然后提交拉取请求。

$ npm run test
$ npm run test:watch # Development model

gaomingcode / hotkeys

维护者

详情