Press "Enter" to skip to content

A Robust Javascript Library for Capturing Keyboard Input | hotkeys

HotKeys.js is an input capture library with some very special features, it’s easy to capture and use, it has a reasonable footprint (about 3 KB) (compressed: 1.73 KB), and it has no dependencies. It should not interfere with any JavaScript libraries or frameworks.

javascript capture keyboard, detect hotkeys javascript, javascript hotkeys, javascript capture keyboard input, javascript keyboard controls, javascript capture key combinations

How to make use of it:

Install it through NPM:

npm install hotkeys-js

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

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

Basic utilization:

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

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

Available choices will be passed because the second parameter to the hotkeys technique.

hotkeys('ctrl+a+s', {
  scope: 'all',
  splitKey: '+',
  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!');
  }
});

Capture Keyboard Input, Hotkeys Plugin/Github, javascript keyboard shortcuts library, keyboard js


See Demo And Download

Official Website(jaywcjlove): Click Here

This superior jQuery/javascript plugin is developed by jaywcjlove. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.