Keyboard Shortcuts

In this example we show how to create a keyboard shortcut for an action.

We start with a simple button that loads some content from the server:

<button
	{ hx.TriggerExtended(
		trigger.On("click"), 
		trigger.
			On("keyup").
			When("altKey&&shiftKey&&key=='D'").
			From("body"))... }
	{ hx.Post("/examples/templ/keyboard/doit/")... }
>
	Do It! (alt-shift-D)
</button>

Note that the button responds to both the click event (as usual) and also the keyup event when alt-shift-D is pressed. The from: modifier is used to listen for the keyup event on the body element, thus making it a “global” keyboard shortcut.

You can trigger the demo below by either clicking on the button, or by hitting alt-shift-D.

You can find out the conditions needed for a given keyboard shortcut here:

https://javascript.info/keyboard-events

Demo