如何将键盘导航添加到苗条的应用程序（窗口对象除外）？

【问题标题】：How do I add keyboard navigation to a svelte app (other than window object)?如何将键盘导航添加到苗条的应用程序（窗口对象除外）？
【发布时间】：2020-06-27 21:45:25
【问题描述】：

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

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

在 svelte 中也可能出现类似的情况吗？我是否错过了任何苗条的附加组件？

【问题讨论】：

标签： svelte

【解决方案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); }
    }
}

请参阅 repl here 和有关 svelte action here 的文档

【讨论】：