Svelte中如何为特定元素添加键盘事件？

问题出在普通div元素默认不具备可聚焦性——只有当元素获得焦点时，才会触发键盘事件。直接给div绑定keyup自然没反应，而document是全局上下文，所以能捕获所有键盘事件。

解决这个问题只需要让目标元素变成可聚焦状态，两种常用方式：

方法1：添加tabindex属性让元素可聚焦 #

给div加上tabindex属性，让它可以被聚焦（tabindex="0"支持tab键选中，tabindex="-1"仅允许通过JS主动聚焦），再配合自动聚焦确保元素一开始就能接收键盘事件：

<script>
    import { onMount } from 'svelte';
    let targetDiv;

    const handleKeyUp = () => {
        console.log('键盘按键松开');
    };

    onMount(() => {
        targetDiv.focus();
    });
</script>

<div
    bind:this={targetDiv}
    tabindex="0"
    on:keyup={handleKeyUp}
    style="width:100%; height:200px; border:2px solid #ff0000;"
></div>

方法2：仅通过JS主动聚焦（适合不需要tab选中的场景） #

如果不想让元素被tab键选中，改用tabindex="-1"，依然通过bind:this获取元素引用后主动调用focus()：

<script>
    import { onMount } from 'svelte';
    let targetDiv;

    const handleKeyUp = () => {
        console.log('键盘按键松开');
    };

    onMount(() => {
        targetDiv.focus();
    });
</script>

<div
    bind:this={targetDiv}
    tabindex="-1"
    on:keyup={handleKeyUp}
    style="width:100%; height:200px; border:2px solid #ff0000;"
></div>

注意：如果是input、textarea这类原生可聚焦元素，不需要额外设置tabindex就能直接监听键盘事件，只有div、p这类非交互元素需要处理聚焦问题。

内容的提问来源于stack exchange，提问作者Mohammad Taherian