如何将键盘导航添加到 svelte 应用程序（window 对象除外）？

Question

我想为我的 svelte 应用程序添加键盘导航。我知道可以使用 svelte 的 window 对象，例如 <svelte:window on:keydown={handleKeydown}/>。然而，生成的代码并不是很好，因为它将 window 对象的使用分散到整个应用程序中。

理想情况下，我想使用类似于 vue 的语法，其中可以编写 <input v-on:keyup.page-down="onPageDown">.

在 svelte 中也可以实现类似的功能吗？我错过了任何 svelte 附加组件吗？

Answer 1

您可以将事件侦听器附加到输入元素：

<input on:keyup={handleKeyUp}/>

<script>
  function handleKeyUp(event) {
    // ..
  }
</script>

如果您想要与问题中的语法相同的语法，您可以使用这样的操作：

<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); }
    }
}

在回复中查看here and the doc about svelte action here

如何将键盘导航添加到 svelte 应用程序（window 对象除外）？

How do I add keyboard navigation to a svelte app (other than window object)?

svelte