I would like add keyboard navigation to my svelte app. I know it's possible using svelte's window object like <svelte:window on:keydown={handleKeydown}/>. Yet the resulting code is not very nice since it spreads usage of the window object over the whole app.
Ideally I would like to use a syntax similar to vue where it's possible to write <input v-on:keyup.page-down="onPageDown">.
Is something like that possible in svelte as well? Did I miss any svelte add-ons?
You can attach an event listener to the input element :
<input on:keyup={handleKeyUp}/>
<script>
function handleKeyUp(event) {
// ..
}
</script>
If you want the same syntax as the one in your question, you can use an action like this one :
<input use:keyup={{PageDown: onPageDown}}/>
<script>
import { keyup } from './keyup.js';
function onPageDown() { ... }
</script>
export function keyup(node, map) {
const listener = (e) => { if (map[e.key]) map[e.key](e); }
node.addEventListener("keyup", listener);
return {
destroy() { node.removeEventListener("keyup", listener); }
}
}
See it in the repl here and the doc about svelte action here