Need to transform design to code? Don't hardcode it, Avocode it!
See how
September 13, 2016

Handle keyboard shortcuts in the browser with Combokeys

Head of Product & Co-founder at Avocode and a former Lead Product Developer and Co-founder at MadebySource.

"I still write code. In fact that's what I love doing most."

Projecting a system of shortcuts among multiple platforms while giving the user freedom to hit their favorite hot keys - or even adjust what each shortcut does - can be tricky. Luckily there are things like Combokeys, a JavaScript library for handling keyboard shortcuts in the browser. It's been forked from the popular Mousetrap project.

Tip: Definitely check out the Mousetrap website. It is built around what it does and after pressing a few keys or key combos you will know the nuts and bolts.

Combokeys has been refactored to better fit the Node.js environment. Unlike Moustrap, Combokeys is a constructor and doesn't automatically listen on the document. Instead, you can specify which element it listens to for keyboard shortcuts. It has support for keypress, keydown, and keyup events on specific keys, keyboard combinations, or key sequences. It's almost like hitting cheatcodes in GTA.

It is around 3.3kb minified and gzipped and 9.9kb minified, has no external dependencies, and has been tested in the following browsers:

  • Internet Explorer 6+ (test suite works in IE9+)
  • Safari
  • Firefox
  • Chrome

What makes Combokeys special?

  • CommonJS, NPM.
  • You can listen on multiple, specified elements simultaneously.
  • You are not limited to keydown events (You can specify keypress, keydown, or keyup or let Combokeys choose for you).
  • You can bind key events directly to special keys such as ? or * without having to specify shift+/ or shift+8 which are not consistent across all keyboards.
  • It works with international keyboard layouts.
  • You can bind Gmail-like key sequences in addition to regular keys and key combinations.
  • You can programatically trigger key events with the trigger() method.
  • It works with the numeric keypad on your keyboard.
  • The code is well documented/commented.

AMD usage

You can also build an AMD-compatible version by running npm run build. This creates a universally compatible dist/combokeys.js, which you can use via RequireJS, or include directly in a <script> tag with the global variable Combokeys.

Tip: Check out React Shorcuts which has Combokeys under the hood.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: