やりたいこと
Webサービスによっては有効なショートカットが割り当てられていることがありますが、 それを無効化する方法です。
例えばesa.ioではCtrl + Eは編集モードに移動するショートカットですが、 あるページだけこのショートカットをオフにしたいと思いました。
前提条件
Google Chromeで確認しています。
概要
- キーを無効にしたい要素に適切なイベントリスナーを追加
- イベントリスナーの中でstopPropagationを呼ぶ
手順
例えばCtrl + Eを無効にする場合は以下のようにします。
function tasknameFilter(e) {
if (e.ctrlKey && e.key === "e") {
e.stopPropagation();
}
}
document.getElementById("taskname").addEventListener('keydown', tasknameFilter);