Capture Keyboard Input In Pure JavaScript – hotkeys

Category: Javascript , Recommended | February 12, 2019
Author: jaywcjlove
Views Total: 1,553
Official Page: Go to website
Last Update: February 12, 2019
License: MIT

Preview:

Capture Keyboard Input In Pure JavaScript – hotkeys

Description:

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

Install it via NPM:

npm install hotkeys-js

How to use it:

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

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

Basic usage:

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

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

Changelog:

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

You Might Be Interested In:


Leave a Reply