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' でない場合は、アーリーリターンする。

参考

• Element: keydown event - Web APIs | MDN
• KeyboardEvent: key property - Web APIs | MDN