Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Easy keyboard shortcuts on any website.

branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.md

kkjjhlhlba

kkjjhlhlba is a dependency-free tool that makes building keyboard shortcuts as easy as the Konami code. You define what shortcuts you want and kkjjhlhlba will make them work (and add a shortcut cheatsheet for you as a free added bonus!).

Getting started

  1. Add kkjjhlhlba.js to your page.
  2. kkjjhlhlba.js creates a global object kkjjhlhlba.
  3. Add your own JavaScript file to define your shortcuts.
  4. Use the kkjjhlhlba API to define your shortcuts.

The example below shows how to implement two simple keyboard shortcuts:

kkjjhlhlba.start({
  shortcuts: {
    '/': {
      description: 'Search',
      method: function() {
        document.getElementById('search-box').focus();
      }
    }
    'g,h': {
      description: 'Go to the homepage',
      method: 'https://www.example.com'
    }
  }
});

API

kkjjhlhlba.start(options)

kkjjhlhlba.start registers the keyboard shortcuts defined in the options object. The kkjjhlhlba.start method may be called several times on a single page. If multiple shortcuts with the same signature are defined in the different calls to kkjjhlhlba.start, the shortcut defined in the last call wins. This can be useful when creating global shortcuts and page-specific shortcuts.

kkjjhlhlba.start({
  noCheatsheet: true,
  shortcuts: {
    '/': {
      description: 'Search',
      method: function() {
        document.getElementById('search-box').focus();
      }
    }
    'g,h': {
      description: 'Go to the homepage',
      method: 'https://www.example.com'
    },
    'Q': {
      description: 'Quit',
      method: function() {
        exampleGame.quit();
      }
    },
    'ctrl+k': {
      method: function() {
        console.log('This is a hidden shortcut. It works, but it doesn't show up in the cheatsheet.');
      }
    }
  }
});
options
  • shortcuts is a required object within the options object. The shortcuts object contains the shortcut objects (see below).
  • noCheatsheet is an optional boolean that determines whether a cheatsheet will be created. If noCheatsheet is set to true in any call to kkjjhlhlba.start, no cheatsheet will be created.
shortcut

A keyboard shortcut is defined by a shortcut object. The object key of the shortcut object defines the keypress sequence that will fire the shortcut code. The shortcut object contains a required method attribute, and an optional description attribute.

  • method can be a function or a string. If a string is used, kkjjhlhlba assumes the string is a valid URL, and redirects the page to that URL. If a function is used, that function is called when the keyboard shortcut is fired.
  • description is a string used when building the shortcut cheatsheet to describe what the shortcut does. If the description attribute is absent, the shortcut is not included in the cheatsheet.

Keys pressed in sequence are separated by commas (e.g. g,h means press g, then press h), keys pressed at the same time are separated by the plus symbol (e.g. ctrl+k means press ctrl and k at the same time), and keys are case sensitive (e.g. s is not the same as S, but shift+s is the same as S).

kkjjhlhlba.getShortcuts()

kkjjhlhlba.getShortcuts returns an object of all the shortcuts that have been registered using kkjjhlhlba.start.

How it works

kkjjhlhlba adds a keydown and keyup event listener on the body of the HTML page. It converts the pressed key's keycode into the key's value, and builds a string based on the keys that have been pressed. On each keyup, it checks if the string corresponds to a registered shortcut.

What's with the name?

Think Vim and 80's video games.

Something went wrong with that request. Please try again.