How do I set up a key sequence like 'a + b > c' in KeyboardJS?

Use the bind method with the sequence syntax: keyboardJS.bind('a + b > c', handler). This allows intuitive definition of complex combos, as shown in the README examples for handling multi-step shortcuts.

Does KeyboardJS work with non-US keyboard layouts?

Yes, it supports custom locales. You can create or modify locales based on the provided US layout file to handle international keyboards, making it adaptable for global users without relying on browser defaults.

KeyboardJS vs Keystrokes: which should I choose?

The author recommends Keystrokes for new projects as it's more refined and optimized for modern browsers. KeyboardJS is stable but legacy; choose Keystrokes for better performance and updated features, or KeyboardJS if you need a proven solution with existing code.

How can I scope shortcuts to different pages in a single-page app?

Use the context system: set contexts with keyboardJS.setContext('contextName') and bind shortcuts within them. Activate contexts based on routes, as demonstrated in the README with router integration for clean scoping.

Can I prevent a key from repeating when held down?

Yes, within the keydown handler, call e.preventRepeat() to ensure the binding triggers only once per key press, even if the key is held. This is useful for avoiding unintended repeated actions in games or tools.

How do I remove or unbind a keyboard shortcut in KeyboardJS?

Use the unbind method with the key combo and the original handler: keyboardJS.unbind('a', handler). This is essential for cleaning up bindings dynamically and preventing memory leaks in long-running apps.

Open-Awesome

KeyboardJS

MITJavaScriptv2.6.2

A JavaScript library for binding keyboard combos with support for contexts, custom locales, and conflict-free key handling.

Visit Website GitHub

2.1k stars221 forks0 contributors

What is KeyboardJS?

KeyboardJS is a JavaScript library that enables developers to bind keyboard shortcuts and complex key combinations in web applications without dealing with low-level key codes. It solves the problem of managing keyboard interactions cleanly by providing an intuitive API for defining combos, handling key events, and scoping shortcuts to different application contexts.

Target Audience

Frontend developers building interactive web applications, especially single-page applications (SPAs), games, or tools that require robust keyboard shortcut support.

Value Proposition

Developers choose KeyboardJS for its simple, declarative syntax for complex key bindings, built-in context system for scoping shortcuts, and avoidance of key combo conflicts—making it easier to implement and maintain keyboard-driven interactions compared to manual event handling.

Overview

A JavaScript library for binding keyboard combos without the pain of key codes and key combo conflicts.

Use Cases

Best For

Adding keyboard shortcuts to single-page applications (SPAs)
Building web-based games with complex key combos
Creating productivity tools with customizable hotkeys
Implementing accessible keyboard navigation in web apps
Managing scoped shortcuts for different application views/routes
Handling international keyboard layouts in keyboard-driven interfaces

Not Ideal For

New projects where a more modern and refined alternative like Keystrokes is recommended by the author
Applications requiring auto-attaching keyboard listeners without manual watch() and stop() calls
Teams relying heavily on TypeScript or modern ES modules seeking native support without extra configuration

Pros & Cons

Pros

Intuitive Combo Syntax

Supports simultaneous combos like 'a + b' and sequences like 'a + b > c' with a clean, readable API, eliminating the need for raw key code handling.

Contextual Scoping for SPAs

Provides a context system to scope bindings to different parts of the application, ideal for single-page apps where shortcuts need to change per route or view.

International Keyboard Support

Allows custom locales beyond the default US layout, enabling proper handling of international keyboards for global applications without hacks.

Flexible Event Control

Offers separate handlers for keydown and keyup events, with e.preventRepeat() to control key repeat, giving fine-grained control over keyboard interactions.

Cons

Outdated and Superseded

The author explicitly recommends Keystrokes for new projects, indicating KeyboardJS is less maintained and not optimized for modern browsers, potentially missing recent improvements.

Manual Event Attachment

Requires explicit calls to watch() and stop() to attach and detach listeners, adding setup complexity compared to libraries that auto-bind to the DOM.

Limited Modern JavaScript Support

Primarily distributed via legacy dist files in the repo, lacking native ES module support or TypeScript definitions, which can hinder integration in modern build systems.

Frequently Asked Questions

Related Projects

mousetrap

Simple library for handling keyboard shortcuts in Javascript

Stars11,775

Forks957

Last commit3 years ago

Keypress

A keyboard input capturing utility in which any key can be a modifier key.

Stars3,157

Forks307

Last commit5 years ago

jquery.hotkeys

jQuery Hotkeys lets you watch for keyboard events anywhere in your code supporting almost any key combination.

Stars2,554

Forks458

Last commit4 years ago

jwerty

⌨ Awesome handling of keyboard events

Stars1,199

Forks105

Last commit8 years ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub