Buy Us a Beer! Community Forum Micro-Consulting

Hotkeys ❺

Capture specific hotkeys to perform specific tasks

We use hotkeys all the time, like CTRL+C... but did you know that you can create hotkeys uniquely for your website?

This is useful for all sorts of things...

  • Help menus

  • Search

  • Filter resets

  • Navigation

  • Admin shortcuts, like switch-to-edit-mode

Use Cases

Here are a few examples;

  • F1 - show your own help menus

  • ESC - filter reset

  • CTRL+P - user account custom preferences

Best practices;

  • Seek to avoid common browser hotkeys.

  • Generally, stick with function keys and modifier keys

Usage Notes

When you include this library in your site or page, you can easily add a custom code callback to handle events when the breakpoints change.

Here's what that would look like;

<script>
window.sa5 = window.sa5 || [];
window.sa5.push(['hotkeys', (hotkeyHandler) => {
  hotkeyHandler.register("f2", () => {
    console.log("f2 pressed");
  });
}]);
</script>

Based on the hotkey pressed, you can perform whatever scripting you like.

The hotkeys you want are described in the first parameter of the register function. You can have modifier keys, and you can have multiple keys assigned to the same handler event.

Here are some examples;

  • ctrl+alt+q - modifier keys

  • ctrl+a,ctrl+b,r,f - multiple hotkeys on the same handler

  • ⌘+s,ctrl+s - Apple and Windows

This setup is also designed so that you can have register hotkeys in multiple separate code blocks on the same page. Why would want to do that?

  • Register some hotkeys in your site-wide code, so that they work on all pages

  • Register additional hotkeys on a specific page or collection page

  • Register additional hotkeys in a custom code element, within a component, so that they travel with that component anywhere you use it

Technical Notes

Based on Hotkeys.js.

Hotkeys.js has been tested and should work in.

  • Chrome

  • Safari

  • Firefox

  • Internet Explorer 6+

Getting Started ( NOCODE )

There are currently no configuration options for the data-binding feature, so we’ll use a no-code integration approach.

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Implement your callback handlers

See above for details.

Resources

Last updated