独自のページ内検索をCtrl+Fでフォーカスするために、ブラウザのショートカットキーを奪う方法

概要

システム内に設けた検索窓にCtrl+Fで遷移できると便利な場合があります。PDFをブラウザで閲覧するとCtrl+FでPDF内検索が開きますが、まさにあれです。

実現方法

addEventListenerでkeydownを検知し、デフォルトの動作を無効化しましょう

document.addEventListener('keydown', (evt) => {
  if (evt.ctrlKey && evt.key === 'f') {
    // ブラウザの検索ショートカットを無効にする
    evt.preventDefault()

    // 検索窓をフォーカスさせる
    searchInputRef.value.focus()
  }
})

参考

まとめ

地味な機能ですけど、結構嬉しかったりする。案外簡単に実現できてうれしかった。