Keyboard Shortcuts Demo

This demo demonstrates how to use Hyperscript and htmx to create keyboard shortcuts. Shortcuts are globally defined on the container but scoped to the window.

Global Shortcuts

Shortcut	Action	Button (Clickable)
`Alt/⌘` + `Shift` + `1`	Trigger Action 1
`Alt/⌘` + `Shift` + `2`	Trigger Action 2
`Alt/⌘` + `Shift` + `3`	Trigger Action 3
`Alt/⌘` + `Shift` + `S`	Focus Search Input

Press a shortcut key!

How it works

We use Hyperscript's on keydown event listener to intercept key presses globally:

<div _="on keydown[(altKey or metaKey) and shiftKey and key == '1'] from window click #btn1">...</div>

keydown[...]: Filters the event by specific keys and modifiers.
(altKey or metaKey) and shiftKey: Supports both Alt (Windows/Linux) and Command (MacOS) combined with Shift to avoid conflicts with common browser shortcuts.
from window: Listens for the event on the global window object.
click #btn1: Triggers a click on the target element, which then fires its hx-post.
The Alt/⌘ + Shift + S shortcut uses a check to avoid focusing if the user is already typing in an input field.