スラッシュ(/)キーでブログのサイト内検索のショートカットを実装する

以前 Web メディアサイトを実装した際に、参考として見ていた gori.me という Web メディアが / キーにサイト内検索のショートカットを実装していたのが印象的で、いつか自分でも実装してみたいと思っていました。

ゴリミー、「/（スラッシュ）」キーで検索画面が表示されるように

「ググるのではなくゴリミる」というサイトデザインのコンセプトにあわせて毎週のように細々とした修正や機能追加、テストやバグ潰しなどを行っているが、この度、PC版において「/（スラッシュ）」キーで検索画面が表示される機能を追加した。サイト内検索がより一層使いやすくなると期待している。

https://gori.me/blogging/119427

ショートカットってなんかコマンド感あってカッコいいですよね。 需要なんてほとんどないでしょうけど、自分のサイトにも実装してみたいと思います。

実装手順

/ キーを入力すると検索ページへ遷移する

// Navigate to search page on pressing "/"
document.addEventListener("keydown", event => {
  if (event.key === "/") {
    event.preventDefault();
    window.location.href = "/search/";
  }
});

/search/ 遷移後に自動で検索フォームにフォーカスを当てる

さらに、キーボードショートカットで検索ページへ遷移する人はそもそもマウスで操作をしたくないと思うので、検索ページへ遷移したあとに自動で検索フォームにフォーカスを当てるようにしてみます。

// Focus on search input after page load
if (window.location.pathname === "/search/") {
  window.addEventListener("load", () => {
    document.querySelector('input[name="search"]')?.focus();
  });
}

以上の2点の JavaScript コードを挿入することで、/ キーによるサイト内検索ショートカットを実装することができます。