JavaScriptプログラムに関する各種メモ書き

キーボードショートカット「/」で検索フォームにフォーカスし、「esc」でフォーカスを外す

<input type="text" id="q">へフォーカスします。

// キーボードショートカットのハンドラー
function handleShortcut(event) {
	if (event.key === "/" && !isInputOrTextArea(document.activeElement) ) {
	  event.preventDefault();
	  document.getElementById('q').focus();
	}
	else if (event.key === "Escape") {
      document.activeElement.blur();
    }
}

// フォーカスされている要素がテキスト入力またはテキストエリアかどうかを判定
function isInputOrTextArea(element) {
	return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';
}

// キーボードイベントをページ全体で監視
document.addEventListener('keydown', handleShortcut);
No.2389
08/24 11:12

edit