# Keyboard Shortcuts

<div id="demo-content" class="not-prose demo-container flex justify-center"></div>

## Basic usage

On the client, add a keyboard event to `hx-trigger` alongside `click`.

```html
<button hx-trigger="click, keyup[altKey&&shiftKey&&key=='D'] from:body"
        hx-post="/doit">
  Do It! (Alt+Shift+D)
</button>
```

- [`hx-trigger`](https://four.htmx.org/reference/attributes/hx-trigger) accepts multiple events separated by commas.
- `keyup[altKey&&shiftKey&&key=='D']` uses an [event filter](https://four.htmx.org/reference/attributes/hx-trigger#event-filters) to match only the Alt+Shift+D combination.
- [`from:body`](https://four.htmx.org/reference/attributes/hx-trigger#from) makes the shortcut global: the listener is on the `<body>`, not the button itself.

On the server, respond with the result content:

```html
<span>Done!</span>
```

## Notes

### Keyboard event properties

The filter expression inside `[...]` has access to the raw [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) properties: `key`, `code`, `altKey`, `ctrlKey`, `shiftKey`, and `metaKey`. Combine them with `&&` and `||` to match any shortcut.

For details on key values, see [Keyboard Events on javascript.info](https://javascript.info/keyboard-events).