on:keydown 事件，带有 svelte 的 Enter 键

Question

我正在使用 svelte 和on:click按钮上的事件。单击此按钮时，我将一些信息发送到更高的组件。我想做的是按回车键，但on:keydown似乎不起作用？我怎样才能在按下回车键时触发它？

<button on:click={() => 
   dispatch('search', { searchword: item })}
>ClickMe</button>

<button on:keydown={() => 
   dispatch('search', { searchword: item })}
>PressEnter</button>

Answer 1

click如果按钮具有焦点或者是表单的一部分并且作为表单提交的一部分隐式单击，则Enter 将自动触发。

一般来说，我建议使用表单，然后在表单中输入<input>将导致表单提交。然后，人们还可以直接处理表单的submit事件，因为无论如何都可能需要取消，除非需要重新加载页面。

例子：

<script>
    let value = '';
    let submittedValue = null;
</script>

<form on:submit|preventDefault={() => submittedValue = value}>
    <label>
        Search
        <input bind:value />
    </label>
    
    <button on:click={() => console.log('button clicked')}>GO</button>
</form>

{#if submittedValue != null}
    <p>Submitted: {submittedValue}</p>
{/if}

REPL