@ramstack/alpinegear-typegrab provides the x-typegrab Alpine.js directive, which automatically focuses an element when the user starts typing and no editable element is active.
npm install @ramstack/alpinegear-typegrab
@ramstack/alpinegear-typegrab is a lightweight plugin for Alpine.js that provides the x-typegrab directive.
The directive automatically focuses an element when the user starts typing any printable, non-whitespace character,
as long as no editable element is currently focused. This is useful for search inputs, command palettes,
and similar UX patterns where typing should immediately direct input to a specific field.
* Listens globally to the keydown event.
* Triggers only for printable, non-whitespace characters.
* Ignores events with Ctrl, Alt, or Meta modifiers.
* Does nothing if the active element is input, textarea, or an element with contenteditable.
* Focuses the element marked with x-typegrab.
``html
`
`bash`
npm install --save @ramstack/alpinegear-typegrab
`js
import Alpine from "alpinejs";
import typegrab from "@ramstack/alpinegear-typegrab";
Alpine.plugin(typegrab);
Alpine.start();
`
`html``
placeholder="Type to search..."
x-typegrab
/>
When the user presses any printable character key (excluding whitespace) while no other editable element is focused,
this input will automatically receive focus.
* The directive does not cancel or modify the original keyboard event.
* The target element must be focusable.
* Focus will not be stolen from active editable elements.
You can find the source code for this plugin on GitHub:
https://github.com/rameel/ramstack.alpinegear.js/tree/main/src/plugins/typegrab
Bug reports and contributions are welcome.
This package is released as open source under the MIT License.
See the LICENSE file for more details.