hotkeys-js

What is hotkeys-js?

The hotkeys-js npm package is a simple library for handling keyboard shortcuts in web applications. It allows developers to define and manage keyboard shortcuts with ease, providing a straightforward API for binding and unbinding keys.

What are hotkeys-js's main functionalities?

Binding a single key

This feature allows you to bind a single key to a function. In this example, pressing the 'A' key will trigger a console log message.

hotkeys('a', function(event, handler) {
  console.log('You pressed A!');
});

Binding multiple keys

This feature allows you to bind multiple keys to a single function. In this example, pressing either 'Ctrl+A' or 'Ctrl+B' will trigger the same console log message.

hotkeys('ctrl+a, ctrl+b', function(event, handler) {
  console.log('You pressed either Ctrl+A or Ctrl+B!');
});

Binding key combinations

This feature allows you to bind key combinations to a function. In this example, pressing 'Ctrl+Shift+K' will trigger a console log message.

hotkeys('ctrl+shift+k', function(event, handler) {
  console.log('You pressed Ctrl+Shift+K!');
});

Unbinding keys

This feature allows you to unbind a previously bound key. In this example, the 'A' key will no longer trigger any function.

hotkeys.unbind('a');

Filtering key events

This feature allows you to filter which key events should be processed by hotkeys-js. In this example, all key events will be processed.

hotkeys.filter = function(event) {
  return true; // Process all key events
};

Other packages similar to hotkeys-js

mousetrap

Mousetrap is a simple library for handling keyboard shortcuts in Javascript. It is similar to hotkeys-js in that it allows you to bind and unbind keys and key combinations. However, Mousetrap has a slightly different API and includes additional features such as sequence bindings and key event handling in specific DOM elements.

keymaster

Keymaster is a simple micro-library for defining and dispatching keyboard shortcuts. It is similar to hotkeys-js in its simplicity and ease of use. Keymaster focuses on providing a minimalistic API for binding keys and key combinations, but it does not include some of the more advanced features found in hotkeys-js, such as filtering key events.

keyboardjs

KeyboardJS is a robust library for handling keyboard input. It offers more advanced features compared to hotkeys-js, such as support for key sequences, key states, and context-specific bindings. While it is more feature-rich, it also has a steeper learning curve compared to the simplicity of hotkeys-js.

README

Hotkeys

HotKeys.js is an input capture library with some very special features, it is easy to pick up and use, has a reasonable footprint (~3kb) (gzipped: 1.73kb), and has no dependencies. It should not interfere with any JavaScript libraries or frameworks. Official document demo preview.

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

Usage

You will need Node.js installed on your system.

$ 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!') 
});

Or manually download and link hotkeys.js in your HTML, It can also be downloaded via UNPKG:

<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;
  }
});
</script>

Used in React

react-hotkeys is the React component that listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.

$ npm install react-hot-keys --save

Detailed use method please see its documentation react-hotkeys.

import React, { Component } from 'react';
import Hotkeys from 'react-hot-keys';

export default class HotkeysDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      output: 'Hello, I am a component that listens to keydown and keyup of a',
    }
  }
  onKeyUp(keyNm, e, handle) {
    this.setState({output: keyNm})
  }
  onKeyDown(keyName, e, handle) {
    this.setState({output: keyNm})
  }
  render() {
    return (
      <Hotkeys 
        keyName="shift+a,alt+s"
        onKeyDown={this.onKeyDown.bind(this)}
        onKeyUp={this.onKeyUp.bind(this)}
      >
        <div style={{ padding: 50 }}> {this.state.output} </div>
      </Hotkeys>
    )
  }
}

Browser Support

Hotkeys.js has been tested and should work in.

Internet Explorer 6+
Safari
Firefox
Chrome

Supported Keys

HotKeys understands the following modifiers: ⇧, shift, option, ⌥, alt, ctrl, control, command, and ⌘.

The following special keys can be used for shortcuts: backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete and f1 through f19.

⌘ Command()
⌃ Control
⌥ Option(alt)
⇧ Shift
⇪ Caps Lock(Capital)
fn Does not support fn
↩︎ return/Enter space

Defining Shortcuts

One global method is exposed, key which defines shortcuts when called directly.

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;
});


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

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;
  }
});

hotkeys('ctrl+a+s', function(event,handler) {
  if(handler.key === 'ctrl+a+s') {
    alert('you pressed ctrl+a+s!');
  }
});

hotkeys('*','wcj', function(e){
  console.log('do something',e);
});

option

• scope<String>
• element<HTMLElement>
• keyup<Boolean>

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

API REFERENCE

Asterisk "*"

Modifier key judgments

hotkeys('*', function(e){
  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

Use the hotkeys.setScope method to set scope.

// 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

Use the hotkeys.getScope method to get scope.

hotkeys.getScope();

deleteScope

Use the hotkeys.deleteScope method to delete set scope.

hotkeys.deleteScope('issues');

unbind

Similar to defining shortcuts, they can be unbound using hotkeys.unbind.

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

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

Unbind events through functions.

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

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

isPressed

Other key queries. For example, hotkeys.isPressed(77) is true if the M key is currently pressed.

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

keyup

key down and key up both perform callback events.

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

getPressedKeyCodes

returns an array of key codes currently pressed.

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

filter

INPUT SELECT TEXTAREA default does not handle. Hotkeys.filter to return to the true shortcut keys set to play a role, flase shortcut keys set up failure.

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

Relinquish HotKeys’s control of the hotkeys variable.

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

Development

To develop, Install dependencies, Get the code:

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

To develop, run the self-reloading build:

$ npm run watch

Run Document Website Environment.

$ npm run doc:dev

To contribute, please fork Hotkeys.js, add your patch and tests for it (in the test/ folder) and submit a pull request.

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

License

MIT © Kenny Wong