Repository files navigation

Keybind.js is a lightweight (under 1KB minified) JavaScript library for handling custom keybinds and hotkeys. The library is designed to feel native, as if keybinding was part of JavaScript/HTML by default. It allows for simple configuration of single or multi-key hotkeys, with easy detection and event dispatching, similar to the traditionalkeydown andkeyup events.

Current minified size:964 bytes

Simply include keybind.js in your project:

<scripttype="text/javascript"src="path/to/keybind.min.js"></script>

Keybind.js uses the JS key codes. A list of the key codes can be found atMDN Web Docs - Code values for keyboard events.

constkeybind=newKeybind({name:'MyKeybind',type:'multi',codes:newSet(['ShiftRight','KeyA'])});

document.addEventListener('keybindpress',callback);

You can manually update the keys for the keybind if needed:

keybind.set_manual(newSet(['ShiftRight','KeyA']));

To dynamically detect and set a key combination via user input:

keybind.set_detect();

It will now listen for the next key press(es) and automatically sets the keybind. Once the key combination is set, a hotkeybind event is fired.

document.addEventListener('keybindbound',callback);

Keybinds of type'single' can only have one key. However keybinds of type'multi' can have one key or more.

The main difference is that when using theset_detect() function keybinds of type'single' will bind as soon as a key is pressed, whereas keybinds of type'multi' will bind as soon as any key is released, allowing for the user to press multiple keys

Creates a newKeybind object with the provided configuration.

• config (Object): An object with the following properties:
  • name (String): The name of the keybind (used for identification).Required.
  • type (String): Either'single' for single-key keybinds or'multi' for multi-key combinations.Required.
  • codes (Set): A set of key codes names that should trigger the keybind.Required.

• name (String): The name of the keybind (used for identification).
• type (String): Either'single' for single-key keybinds or'multi' for multi-key combinations.
• codes (Set): A set of key codes names that should trigger the keybind.

Manually sets the key combination for the keybind.

• codes (Set): A set of key codes. If the keybind type is'single', only one key code should be provided within the set.Required.

Starts the detection process for dynamically setting keybinds. The library will listen for the next key press(es) and update the key combination accordingly. Once the keybind is set, akeybindbound event is fired.

• keybindpress: Fired when the key combination is pressed.
  • name (String): The name of the keybind.
  • codes (Set): Pressed key codes.
• keybindbound: Fired when a new key combination is set during the detection process.
  • name (String): The name of the keybind.
  • codes (Set): Newly bound key codes.