JavaScript で エスケープキー（Esc）を押したときにモーダルを閉じる

モーダルはエスケープキー押下で閉じられる方が親切。モーダル系のライブラリはこれを実装していることが多く、キーボードを使ってブラウジングする人にとってもやさしい設計にできる。

方法としては、 window で 'keydown' イベントをリッスンし、イベントハンドラーで closeDialog() のようなモーダルを閉じる処理を行う。

const onKeyDownEsc = (event: KeyboardEvent) => {
  if (!isOpen || event.key !== 'Escape') return
  event.preventDefault()
  closeDialog()
}
 
window.addEventListener('keydown', onKeyDownEsc)

ここでは、isOpen 変数でモーダルの状態を管理しているとする。

もし isOpen でない場合や押下されたキーが 'Escape' でない場合は、アーリーリターンする。