Buy Us a Beer! Community Forum Micro-Consulting

Hotkeys ❺

Capture specific hotkeys to perform specific tasks

Overview

Supercharge your site by providing quick capabilities through hotkeys.

  • Help menus

  • Search

  • Filter resets

  • Navigation

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.

Internet Explorer 6+
Safari
Firefox
Chrome

Getting Started ( NOCODE )

STEP 1 - Add the Library

There are currently no configuration options for this library, so we’ll use a no-code integration approach.

This feature is using WFU's v5 new TypeScript-based library, so it is has different URLs and code placement from the v4 JS-based library.

You can use both the v4 and v5 libraries simultaneously to get the full feature set during migration.

Add this to the before HEAD custom code area of your site or page.

<!-- Sygnal Attributes 5 | Hotkeys -->
<script defer
src="https://cdn.jsdelivr.net/gh/sygnaltech/[email protected]/dist/nocode/webflow-hotkeys.js"
></script>

Nothing is needed in the before BODY code area.

STEP 2 - Implement your callback handlers

See above for details.

Resources

Last updated