Capture Keyboard Input In Pure JavaScript – hotkeys

Preview:

Description:

The hotkeys JavaScript library allows to capture keyboard input and supports binding custom hotkeys with modifier keys.

Install it via NPM:

npm install hotkeys-js

How to use it:

1. Add the ‘hotkeys.js’ script to the webpage.

<script src="hotkeys.js"></script>

2. Basic usage. Supported modifiers: ⇧, shift, option, ⌥, alt, ctrl, control, command, and ⌘.

hotkeys('shift+a,alt+d, w', function(e){
    console.log('Do something',e);
    if(hotkeys.shift) console.log('You just clicked shift .');
    if(hotkeys.ctrl) console.log('You just clicked ctrl .');
    if(hotkeys.alt) console.log('You just clicked alt .');
});

3. Advanced usages.

hotkeys('a', function(event,handler){
    //event.srcElement: input 
    //event.target: input
    if(event.target === "input"){
        alert('You just pressed a!')
    }
    alert('You just pressed a!') 
});
hotkeys('ctrl+a,ctrl+b,r,f', function(event,handler){
    switch(handler.key){
        case "ctrl+a":alert('You just pressed ctrl+a!');break;
        case "ctrl+b":alert('You just pressed ctrl+b!');break;
        case "r":alert('You just pressed r!');break;
        case "f":alert(' You just pressedf!');break;
    }
});
hotkeys('ctrl+r', function(){ alert('Alert!'); return false });
hotkeys('⌘+r, ctrl+r', function(){ });
hotkeys('ctrl+a+s', function(event,handler) {
  if(handler.key === 'ctrl+a+s') {
    alert('you pressed ctrl+a+s!');
  }
});

4. Trigger.

hotkeys.trigger('ctrl+o');
hotkeys.trigger('ctrl+o', 'scope2');

5. Available options which can be passed as the second parameter to the hotkeys method.

hotkeys('ctrl+a+s', {
  scope: 'all',
  splitKey: '+',
  capture: true, // pass the useCapture option to addEventListener
  element: document.getElementById('warpper'),
  keyup: true, // triggers event on keyup
  keydown: true // triggers event on down
}, function(event,handler) {
  if(handler.key === 'ctrl+a+s') {
    alert('you pressed ctrl+a+s!');
  }
});

6. More API.

// check if a modifier is pressed
hotkeys.shift
hotkeys.ctrl
hotkeys.alt
hotkeys.option
hotkeys.control
hotkeys.cmd
hotkeys.command
// check if is a key is pressed
hotkeys.isPressed('b');
// set scope
// Define shortcuts with a scope
hotkeys('ctrl+o, ctrl+alt+enter', 'issues', function(){
  console.log('do something');
});
hotkeys.setScope('issues');
// get scope
hotkeys.getScope();
// delete scope
hotkeys.deleteScope('issues');
hotkeys.deleteScope('issues', 'newScopeName');
// 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');
// unbind all
hotkeys.unbind();
// returns an array of key codes currently pressed
hotkeys.getPressedKeyCodes();
// returns an array of key codes currently pressed
hotkeys.getPressedKeyString();
// return to the true shortcut keys set to play a role, false shortcut keys set up failure.
hotkeys.filter = function(event){
  return true;
}
// relinquish HotKeys’s control of the hotkeys variable
hotkeys.noConflict();

Changelog:

v3.10.1 (11/23/2022)

• bugfix

v3.10.0 (09/07/2022)

• feat: implement getPressedKeyString

v3.9.5 (08/20/2022)

• chore: add some special symbols

v3.9.4 (05/21/2022)

• fix: Make it so unbind(”) does not remove all event handlers

v3.9.3 (05/03/2022)

• feat: add capture option

v3.9.2 (05/01/2022)

• bugfix

v3.9.1 (04/30/2022)

• bugfix

v3.9.0 (04/22/2022)

• feat: add trigger method
• feat: exports keyMap/modifier/modifierMap object
• type: update type

v3.8.9 (04/11/2022)

• bugs fixed

v3.8.8 (04/08/2022)

• bugs fixed

v3.8.7 (06/13/2021)

• update dependencies

v3.8.6 (06/11/2021)

• update dependencies

v3.8.5 (05/11/2021)

• chore(deps): update dependency kkt to v6.9.0
• chore: update workflows config.
• chore(deps): update dependency.
• chore: modify eslint errors.

v3.8.4 (05/11/2021)

• types: fix hotkeys.noConflict() return type

v3.8.3 (03/11/2021)

• feat: Add numpad special keys
• Dependency updated

v3.8.2 (01/20/2021)

• Update & bugfix

v3.8.1 (05/18/2020)

• fix: Ignore keypressed in select elements that support keyboard data input

v3.8.0 (05/16/2020)

• Command key kept pressed fix

v3.7.6 (03/28/2020)

• fix: Do not transpile typeof helper with itself
• fix: Allow boolean return value from KeyHandler
• chore: Fix ESLint errors

v3.7.5 (03/27/2020)

• Fix Firefox on macOS regression

v3.7.4 (03/25/2020)

• Bugs fixed.

v3.7.3 (11/23/2019)

• fix: Change filter to accept a KeyboardEvent
• fix: Allow events in read only TextArea

v3.7.2 (09/17/2019)

• Fixes command key on Firefox MacOSx
• chore: Modify the code comment

v3.7.1 (08/24/2019)

• feat: custom splitkey.
• test: Increase code test coverage.
• chore: Optimization code.
• chore: Indent using two spaces.
• Fix right command does not fires on macOS.

v3.7.0 (08/24/2019)

• type: Modify Hotkeys Option type

v3.6.14 (08/09/2019)

• Fixed Right command does not fires on macOS

v3.6.13 (07/30/2019)

• fix: Allow keydown = false option

v3.6.12 (07/14/2019)

• Make ‘scope’ an optional option

v3.6.11 (05/27/2019)

• Fix custom keyboard shortcut issues caused by system keyboard shortcuts.

v3.6.10 (05/20/2019)

• fix: unbind keys issue

v3.6.7/8 (05/09/2019)

• fix: if key is not in _handlers,keydown cannot trigger if keyup event is setted
• feat: modify filter function on readOnly element

v3.6.6 (05/08/2019)

• Fix input method editor is processing key input issue.
• Compatible with low-level browsers.
• Replace isSameNode with ===
• Modify closure keyup error, modify isBindElement error

v3.6.4 (05/04/2019)

• Fix multiple key combination binding issues.

v3.6.3 (04/28/2019)

• Fix if keyup: true is set, keydown cannot be triggered.

v3.6.2 (03/30/2019)

• Fix the issue of 2 and 3 key combinations

v3.6.0 (03/27/2019)

• Support for three-key combination

v3.5.1 (03/25/2019)

• Fix the issue of the callback function twice.

v3.5.0 (03/21/2019)

• Updated

v3.4.4 (02/12/2019)

• bugfix

v3.4.3 (01/16/2019)

• update

v3.4.1 (11/22/2018)

• feat: add new declaration for unbind handler

v3.4.0 (11/21/2018)

• feat: Unbind events through functions

v3.3.9 (09/07/2018)

• Bugfix

v3.3.7 (08/28/2018)

• Fixed filter contentEditable element

v3.3.6 (08/25/2018)

• Fixed can’t detect shift alone.

v3.3.5 (06/08/2018)

• Update

v3.3.3 (06/03/2018)

• Compatible with IE.

v3.3.2 (05/29/2018)

• Fixed Not working in IE11