Description: AlpineJS allows you to easily listen for specific key presses (e.g., .enter, .escape) or key combinations (e.g., .ctrl.enter) on input elements or globally on the window. This makes it straightforward to add keyboard-driven interactions to your web applications.
AlpineJS uses event listeners (@event or x-on:event) combined with keyboard event modifiers. The common events are keydown (fires when a key is pressed down) and keyup (fires when a key is released).
<input @keydown.enter="submitForm">
<div @keyup.escape="closeModal"></div>.enter.escape (or .esc).space.arrow-up, .arrow-down, .arrow-left, .arrow-right.tab.delete (handles both Delete and Backspace).backspace.a, .b, etc. (e.g., @keydown.a="doSomething").0, .1, etc..shift.alt (Option key on macOS).ctrl (Control key).meta (Command key on macOS, Windows key on Windows/Linux).cmd
AlpineJS offers a very useful alias .cmd which intelligently maps to .meta (Command key) on macOS and .ctrl (Control key) on Windows/Linux. This simplifies creating cross-platform shortcuts.
<!-- For macOS users this is Cmd+S, for Windows/Linux users this is Ctrl+S -->
<button @keydown.window.cmd.s.prevent="saveDocument">Save (Cmd/Ctrl+S)</button>ctrl, shift) generally doesn't matter, but the specific key (like enter or s) should come last.
<input @keydown.ctrl.shift.enter="submitWithHighPriority">.window and .document): To listen for keyboard events globally, append .window or .document to the event name.
<div x-data="{ open: true }" @keyup.window.escape="open = false">
Press ESC to close this (if open is true).
</div>keyup vs keydown inappropriately:
keydown fires immediately when the key is pressed down. This often feels more responsive for actions like submitting a form on "Enter" or triggering navigation with arrow keys.
keyup fires when the key is released. This is generally better for actions that should occur *after* the character has been "typed" or a key has been held and released, such as validating input after a user finishes typing, or actions where you want to avoid repeated firing if a key is held down (though some keys like Enter don't typically repeat-fire their `keydown` event in a text input in the same way letter keys do).
For example, if you use @keyup.enter on a form input, the user presses Enter, the default form submission (if any) might happen, then your keyup action fires. Using @keydown.enter.prevent gives you more control to handle it immediately and prevent default browser actions if needed.
.window) firing too often or when not intended:
When attaching keyboard listeners to .window (e.g., @keydown.window.escape="closeModal"), ensure your component's logic correctly determines if it *should* act. For instance, only close a modal if it's currently open (if (this.isOpen) { this.isOpen = false; }). Otherwise, multiple components might react to the same global key press, leading to unintended side effects. If multiple modals are on a page, only the active one should typically respond to 'Escape'.
Some key combinations (e.g., Ctrl+S for Save, Cmd+R for Reload, Ctrl+T for New Tab) are standard browser or operating system shortcuts. While AlpineJS allows you to use .prevent (e.g., @keydown.ctrl.s.prevent="mySave") to try and stop the default browser action, this can sometimes be unreliable or lead to a poor user experience if common, expected behaviors are overridden. It's often best to avoid overriding universally expected browser shortcuts unless absolutely necessary and clearly indicated to the user. Consider using less common combinations if you need custom global shortcuts.
Submitted:
Input cleared!
Press the 'Escape' key to close this modal.
Try pressing Cmd+S (Mac) or Ctrl+S (Windows/Linux).
(Note: Browser's default save action should be prevented. If it still appears, it highlights the challenges with overriding some system shortcuts.)