Svelte でショートカットキー実装時に、ボタンのフォーカスを回避する方法

Table of contents

はじめに

Svelte でスペースキーをショートカットとして実装する方法を紹介する。 単純に実装するだけなら、以下のように実装すれば良い。

<svelte:window on:keydown={onkeydown} />

ただ困ったことにスペースキーをショートカットキーとして実装すると、ボタンがフォーカスされてしまう。

フォーカスされる例

ショートカットキーの実装

ショートカットキーの実装は以下のようになる。

<script lang="ts">
    const shortCutKeys = {
        Space: ' ',
        Esc: 'Escape'
    };

    function onkeydown(event: KeyboardEvent) {
        if (event.key in shortCutKeys) {
            event.preventDefault();
        }
        switch (event.key) {
            case shortCutKeys.Space:
                // スペースキーが押された時の処理
                break;
            case shortCutKeys.Esc:
                // Escキーが押された時の処理
                break;
        }
    }
</script>

<svelte:window on:keydown={onkeydown} />

ボタンのフォーカスを回避する方法

ボタンクリック時にフォーカスを外すBlurイベントを追加することで、ボタンのフォーカスを回避することができる。 高階関数を使い、ボタンクリック時にフォーカスを外すBlurイベントを追加する。

export function WithBlur(handler: (event?: MouseEvent) => void) {
  return function (event: MouseEvent): void {
    // カスタム処理
    if (handler) {
      handler(event);
    }

    (event.currentTarget as HTMLElement).blur();
  };
}

呼出す際は以下のようになる。

import { WithBlur } from "$lib/WithBlur";
const someClickHandler = WithBlur(someFunction);

おわりに

Svelte でスペースキーをショートカットとして実装する方法を紹介した。また、スペースキーを実装する際に、ボタンが自動でフォーカスされる問題に対して、フォーカスを回避する方法を紹介した。

また、Ctrl + Space などの複数キーをショートカットとして実装する場合は、こちらのサンプル を参考にしたい。

最近話題の技術書

面倒なことはＣｈａｔＧＰＴにやらせよう