Convert Figma logo to code with AI

jeresig logojquery.hotkeys

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

2,563
475
2,563
2
View on GitHubView on NPM

Top Related Projects

ccampbell's avatar

mousetrap

11,641

Simple library for handling keyboard shortcuts in Javascript

jaywcjlove's avatar

hotkeys-js

6,614

➷ A robust Javascript library for capturing keyboard input. It has no dependencies.

madrobby's avatar

keymaster

6,522

A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

dmauro's avatar

Keypress

3,185

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

RobertWHurst's avatar

KeyboardJS

2,090

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

jamiebuilds's avatar

tinykeys

3,737

A tiny (~650 B) & modern library for keybindings.

Quick Overview

jQuery.hotkeys is a lightweight JavaScript plugin that adds cross-browser support for special key and key combination events. It simplifies the process of binding keyboard shortcuts to specific actions in web applications, making it easier for developers to implement keyboard navigation and shortcuts.

Pros

  • Easy to use and integrate with existing jQuery projects
  • Supports a wide range of key combinations, including modifier keys (Ctrl, Alt, Shift)
  • Cross-browser compatible, ensuring consistent behavior across different browsers
  • Lightweight and has minimal impact on page load times

Cons

  • Requires jQuery as a dependency, which may not be ideal for all projects
  • Limited maintenance and updates in recent years
  • May not be necessary for modern web applications that can use native JavaScript key event handling
  • Lacks support for some advanced features like key sequences or custom key mappings

Code Examples

  1. Basic key binding:
$(document).bind('keydown', 'ctrl+a', function() {
    alert('You pressed Ctrl+A!');
    return false;
});
  1. Binding multiple keys to the same action:
$(document).bind('keydown', 'esc,x', function() {
    console.log('You pressed either Escape or X');
});
  1. Using hotkeys with specific elements:
$('#editor').bind('keydown', 'ctrl+s', function() {
    saveDocument();
    return false;
});

Getting Started

  1. Include jQuery and jquery.hotkeys.js in your HTML file:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/jquery.hotkeys.js"></script>
  1. Bind hotkeys to actions in your JavaScript code:
$(document).ready(function() {
    $(document).bind('keydown', 'ctrl+s', function() {
        saveDocument();
        return false;
    });

    $(document).bind('keydown', 'ctrl+o', function() {
        openDocument();
        return false;
    });
});

This setup allows you to use Ctrl+S for saving and Ctrl+O for opening documents. Adjust the key combinations and functions as needed for your specific application.

Competitor Comparisons

ccampbell logo

mousetrap

11,641

Simple library for handling keyboard shortcuts in Javascript

Pros of Mousetrap

  • No jQuery dependency, making it more lightweight and versatile
  • Supports more complex key combinations, including sequences and konami code
  • Better cross-browser compatibility, especially for special keys

Cons of Mousetrap

  • Slightly more complex API compared to jquery.hotkeys
  • May require more setup for basic key binding scenarios

Code Comparison

jquery.hotkeys:

$(document).bind('keydown', 'ctrl+a', function() {
    console.log('ctrl+a pressed');
});

Mousetrap:

Mousetrap.bind('ctrl+a', function() {
    console.log('ctrl+a pressed');
});

Key Differences

  • Mousetrap doesn't require jQuery, making it more flexible for use in various projects
  • Mousetrap offers more advanced features like key sequences and global bindings
  • jquery.hotkeys has a simpler API for basic key binding scenarios
  • Mousetrap provides better support for international keyboard layouts

Use Cases

  • Choose jquery.hotkeys for simple key binding in jQuery-based projects
  • Opt for Mousetrap in projects requiring complex key combinations or without jQuery dependency

Community and Maintenance

  • Mousetrap has more recent updates and a larger community
  • jquery.hotkeys hasn't been updated in several years, which may impact long-term support
jaywcjlove logo

hotkeys-js

6,614

➷ A robust Javascript library for capturing keyboard input. It has no dependencies.

Pros of hotkeys-js

  • No jQuery dependency, making it more lightweight and versatile
  • Supports a wider range of key combinations and modifiers
  • More actively maintained with recent updates and bug fixes

Cons of hotkeys-js

  • Less established community and ecosystem compared to jquery.hotkeys
  • May require more setup and configuration for basic use cases
  • Documentation could be more comprehensive for advanced features

Code Comparison

jquery.hotkeys:

$(document).bind('keydown', 'ctrl+a', function() {
    alert('you pressed ctrl+a!');
});

hotkeys-js:

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

Both libraries offer similar syntax for binding key events, but hotkeys-js provides more flexibility in handling complex key combinations and offers additional features like scoping and unbinding specific shortcuts.

madrobby logo

keymaster

6,522

A simple micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

Pros of Keymaster

  • Standalone library with no dependencies, unlike jQuery.hotkeys
  • Supports more complex key combinations and sequences
  • Provides a simple API for defining and removing shortcuts

Cons of Keymaster

  • Less integration with jQuery ecosystem
  • May require more setup for basic functionality compared to jQuery.hotkeys
  • Limited browser support for older versions

Code Comparison

Keymaster:

key('⌘+r, ctrl+r', function() {
  alert('refreshing the page');
});

jQuery.hotkeys:

$(document).bind('keydown', 'ctrl+r', function() {
  alert('refreshing the page');
});

Key Differences

  • Keymaster uses a more concise syntax for defining shortcuts
  • jQuery.hotkeys relies on jQuery's event binding system
  • Keymaster supports multiple key combinations in a single definition
  • jQuery.hotkeys integrates seamlessly with other jQuery code

Use Cases

  • Keymaster: Ideal for projects not using jQuery or requiring complex key combinations
  • jQuery.hotkeys: Better suited for jQuery-based projects with simple keyboard shortcuts

Community and Maintenance

  • Keymaster: More recent updates and active community
  • jQuery.hotkeys: Less frequent updates, but still maintained

Both libraries offer efficient ways to handle keyboard shortcuts, with the choice depending on project requirements and existing technology stack.

dmauro logo

Keypress

3,185

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

Pros of Keypress

  • Standalone library without jQuery dependency
  • More extensive key combination support, including sequences and combos
  • Better handling of modifier keys and international keyboard layouts

Cons of Keypress

  • Larger file size and potentially more complex setup
  • Less widespread adoption compared to jquery.hotkeys
  • May have a steeper learning curve for basic use cases

Code Comparison

jquery.hotkeys:

$(document).bind('keydown', 'ctrl+a', function() {
    console.log('Ctrl+A was pressed');
});

Keypress:

var listener = new window.keypress.Listener();
listener.simple_combo("ctrl a", function() {
    console.log('Ctrl+A was pressed');
});

Key Differences

  • jquery.hotkeys relies on jQuery, while Keypress is a standalone library
  • Keypress offers more advanced features like key sequences and combos
  • jquery.hotkeys has a simpler API for basic key binding scenarios
  • Keypress provides better support for complex key combinations and international keyboards
  • jquery.hotkeys is more lightweight and may be easier to integrate into existing jQuery projects

Use Case Recommendations

  • Choose jquery.hotkeys for simple key bindings in jQuery-based projects
  • Opt for Keypress when requiring advanced key combination support or working without jQuery
  • Consider jquery.hotkeys for lightweight implementations with basic keyboard shortcut needs
  • Select Keypress for applications demanding robust keyboard interaction and complex shortcuts
RobertWHurst logo

KeyboardJS

2,090

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

Pros of KeyboardJS

  • More comprehensive key binding functionality, including support for key combinations and sequences
  • No dependency on jQuery, making it more lightweight and versatile
  • Active development and maintenance, with recent updates and bug fixes

Cons of KeyboardJS

  • Slightly more complex API, which may require a steeper learning curve
  • Larger file size compared to jquery.hotkeys, potentially impacting page load times
  • May have compatibility issues with older browsers due to its modern JavaScript features

Code Comparison

jquery.hotkeys:

$(document).bind('keydown', 'ctrl+a', function() {
    console.log('Ctrl+A was pressed');
});

KeyboardJS:

KeyboardJS.bind('ctrl + a', function(e) {
    console.log('Ctrl+A was pressed');
    e.preventDefault();
});

Both libraries allow for binding key combinations, but KeyboardJS offers more advanced features like key sequences and locale-specific bindings. KeyboardJS also provides a method to prevent default browser behavior, which is not directly available in jquery.hotkeys.

While jquery.hotkeys is simpler and integrates seamlessly with jQuery, KeyboardJS offers more flexibility and power for complex keyboard interactions, making it suitable for applications that require advanced key binding capabilities.

jamiebuilds logo

tinykeys

3,737

A tiny (~650 B) & modern library for keybindings.

Pros of tinykeys

  • Lightweight and modern: No dependencies, smaller bundle size
  • TypeScript support: Better type checking and IDE integration
  • More flexible: Works with any JavaScript environment, not just jQuery

Cons of tinykeys

  • Less mature: Fewer contributors and shorter history
  • Limited browser support: Targets modern browsers, may not work in older ones
  • Simpler API: Fewer advanced features compared to jquery.hotkeys

Code Comparison

jquery.hotkeys:

$(document).bind('keydown', 'ctrl+a', function() {
    console.log('Ctrl+A was pressed');
});

tinykeys:

import tinykeys from "tinykeys";

tinykeys(window, {
  "Control+a": () => {
    console.log("Ctrl+A was pressed");
  },
});

Both libraries allow easy binding of keyboard shortcuts, but tinykeys uses a more modern JavaScript approach with imports and arrow functions. jquery.hotkeys relies on jQuery's event binding system, while tinykeys is standalone and can be used with any DOM element, not just the document.

tinykeys offers a cleaner, more concise syntax for defining multiple shortcuts in a single object, which can be easier to manage for complex applications. However, jquery.hotkeys may be more familiar to developers already using jQuery in their projects.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

jQuery.Hotkeys Build Status

#About jQuery Hotkeys is a plug-in that lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination.

This plugin is based off of the plugin by Tzury Bar Yochay: jQuery.hotkeys

The syntax is as follows:

$(expression).bind(types, keys, handler);
$(expression).unbind(types, handler);

$(document).bind('keydown', 'ctrl+a', fn);

// e.g. replace '$' sign with 'EUR'
$('input.foo').bind('keyup', '$', function(){
  this.value = this.value.replace('$', 'EUR');
});

Syntax when wanting to use jQuery's on()/off methods:

$(expression).on(types, null, keys, handler);
$(expression).off(types, handler);

$(document).on('keydown', null, 'ctrl+a', fn);

// e.g. replace '$' sign with 'EUR'
$('input.foo').on('keyup', null, '$', function(){
  this.value = this.value.replace('$', 'EUR');
});

Example

Example

Event Types

Supported types are 'keydown', 'keyup' and 'keypress'

jQuery Compatibility

Works with jQuery 1.4.2 and newer.

It is known to be working with all the major browsers on all available platforms (Win/Mac/Linux)

  • IE 6/7/8+
  • FF 1.5/2/3+
  • Opera-9+
  • Safari-3+
  • Chrome-0.2+

Browserify Compatibility

If you want to include this module in a Browserified project, just add it to node_modules and require it.

require('jquery.javascript');

This will work if jQuery is global (ex. served from a CDN). If it's not, you need to shim it:

{
  "browserify-shim": {
    "jquery": "global:jQuery"
  }
}

Notes

Modifiers are not case sensitive (Ctrl == ctrl == cTRL)

If you want to use more than one modifier (e.g. alt+ctrl+z) you should define them by an alphabetical order e.g. alt+ctrl+shift

Hotkeys aren't tracked if you're inside of an input element (unless you explicitly bind the hotkey directly to the input). This helps to avoid conflict with normal user typing.

You can use namespacing by adding a suffix to the event type (e.g. keyup.toggle)

Hotkeys within inputs

Hotkeys aren't tracked if the user is focused within an input element or any element that has contenteditable="true" unless you bind the hotkey directly to the element. This helps to avoid conflict with normal user typing. If you don't want this, you can change the booleans of the following to suit:

  • jQuery.hotkeys.options.filterInputAcceptingElements
  • jQuery.hotkeys.options.filterContentEditable
  • jQuery.hotkeys.options.filterTextInputs (deprecated, will be removed in a later version)

Meta and Hyper Keys

Meta and hyper keys don't register on keyup in any browser tested.

Chrome 33.0.1750.117

Meta key registers on keydown event. Hyper key registers on keydown event.

Firefox 27.0.1 and Safari 7.0.1

Meta key registers on keydown and keypress events. Hyper key registers on keydown and keypress events.

Opera 19.0

Meta key doesn't register at all :( Hyper key registers on keydown and keypress events.

TL;DR

Bind to keydown event for meta and hyper keys, but meta key does not work in Opera ;)

Addendum

Firefox is the most liberal one in the manner of letting you capture all short-cuts even those that are built-in in the browser such as Ctrl-t for new tab, or Ctrl-a for selecting all text. You can always bubble them up to the browser by returning true in your handler.

Others, (IE) either let you handle built-in short-cuts, but will add their functionality after your code has executed. Or (Opera/Safari) will not pass those events to the DOM at all.

So, if you bind Ctrl-Q or Alt-F4 and your Safari/Opera window is closed don't be surprised.

NPM DownloadsLast 30 Days