はじめに

本記事はWindows上での動作を想定しています。Mac OSはこちら

ブラウザごとに色々なショートカットがありますが、これをキャンセルし、独自のショートカットを追加したい時があります。

特にJavascriptでリッチテキストエディタを作る場合を想定し、contentEditable="true"なelementのイベント発火においてpreventDefault()でキャンセルできるか否かを、実際に試してリストアップしたので共有します。

概略

OSやブラウザ本体の制御に近いものほどpreventDefaultできない。
想像以上にショートカットの種類があった。
Windowsなら基本はkeydownでpreventDefaultする（Mac OSは事情が異なる）。

蛇足：keydownでpreventDefaultするとElectronのacceleratorも発火しなくなります。一方で、preventDefaultしなかった場合はブラウザのデフォルト動作とacceleratorの発火が共に起こり、これはこれで制御が難しい。

環境

OS: Windows 10 (1903)
Chrome 79.0.3945.130
Edge (Legacy) 44.18362.449.0
Firefox 72.0.2

表のみかた

キーボードでキー入力した場合にブラウザの行うデフォルト動作と、keydownイベントにおいてpreventDefault()の有効／無効をyes or noで表に示します。preventDefault()でキャンセルできる場合はyes、キャンセルできない場合はnoとしました。動作はChromeでの動作を基本とし、それと異なる動作をするブラウザではその旨を併記しました。

単独キー入力(without Modifier key)

key	動作	Chrome	Edge(Legacy)	Firefox
A-Z,1-9	文字入力	yes	yes	yes
1文字分の長さの記号(括弧やカンマなど)	文字入力	yes	yes	yes
delete	前方文字を消す	yes	yes	yes
backspace	後方文字を消す	yes	yes	yes
Enter	改行する(段落を区切る)	yes	yes	yes
insert	インサートmodeに変更	yes	yes	なし
Alt	メニュー等へフォーカスを移す	yes	yes	no
Home	表示上の行の先頭へ移動	yes	yes	yes
End	表示上の行の末尾へ移動	yes	yes	yes
Page Up	表示上の一画面上へ移動	yes	yes	yes
Page Down	表示上の一画面下へ移動	yes	yes	yes
右クリックキー	右クリックメニューを呼ぶ	no	no	no

Ctrlと同時に押した場合

key	動作	Chrome	Edge(Legacy)	Firefox
A	全選択	yes	yes	yes
B	Boldにする	yes	yes	ブックマークを開く/yes
C	選択領域をCopy	yes	yes	yes
D	ブックマーク追加	yes	yes	yes
E	URL windowで検索	yes	なし	yes
F	page内を検索	yes	yes	yes
G	検索中に次の候補へカーソル移動(検索中でない場合は、前回の検索を再開)	yes	なし	yes
H	ブラウザ履歴のページへ	yes	yes	yes
I	選択領域をitalicにする	yes	yes	ブックマークを検索/yes
J	ダウンロード履歴	yes	yes	新しいタブを開く/yes
K	URL windowで検索(Eと同じ)	yes	yes	yes
L	URL バーへカーソル移動	yes	yes	yes
M	なし	yes	リーディングリストを開く/yes	ミュート/yes
N	新しいwindowsでブラウザを開く	no	yes	no
O	ファイルを開く	yes	URLバーバーへカーソル移動/yes	yes
P	ページの印刷	yes	yes	yes
Q	なし
R	ページの再読み込み	yes	yes	yes
S	ページ(html)の保存	yes	yes	yes
T	新しいタブを開く	no	yes	プライベートモードで新しいタブを開く/no
U	選択領域にunderlineを引く	yes	yes	ソースを開く/yes
V	Paste	yes	yes	yes
W	ブラウザ(タブ)を閉じる	no	yes	no
X	切り取り	yes	yes	yes
Y	なし		Redo/yes	Redo/yes
Z	Undo	yes	yes	yes
1-9	タブブラウザの切り替え	yes	yes	yes
0	なし
-	ページを縮小	yes	yes	yes
=	ページを縮小	yes	なし	yes
;	ページを拡大	yes	yes	yes
+	ページを拡大	yes	なし	なし
^	なし
\|なし
@	なし
`[`	なし
`]`	なし
:	なし
/	なし
\|なし
,	なし
.	なし
space	なし
delete	前方を単語単位で削除	yes	yes	yes
backspace	後方を単語単位で削除	yes	yes	yes
enter	なし		改行/yes	なし
RightArrow	前方へ単語単位で移動	yes	yes	yes
LeftArrow	後方へ単語単位で移動	yes	yes	yes
UpArrow	なし			行の先頭へ移動
DownArrow	なし			行の末尾へ移動
Pageup	タブ切り替え	no	表示されている範囲の先頭へ移動/yes	no
Pagedown	なしタブ切り替え	no	表示されている範囲の末尾へ移動/yes	no
Home	文章の先頭へ移動	yes	yes	yes
End	文章の末尾へ移動	yes	yes	yes

Ctrl+Shiftと同時に押した場合

key	動作	Chrome	Edge(Legacy)	Firefox
A		なし	なし	アドオンマネージャーを開く/yes
B	ブラウザのメニューを出す	yes	なし	ブラウジングライブラリーを開く/yes
G	検索	yes	音声読み上げ	なし
H		なし	なし	ブラウジングライブラリーを開く/yes
I	デバッグツールを開く	yes	なし	yes
J	デバッグツールを開く	yes	yes	別windowでデバックツールを開く/yes
K	無し	yes	同じページを新しいタブで開く/yes	デバッグツールを開く/yes
L	なし		ページを再読み込み/yes	なし
M	ユーザーログイン関連	yes	手書き入力モード/yes	モバイルデバイスのエミュレート表示/yes
N	シークレットモードでブラウザを開く	no	なし	なし
O	ブックマーク操作	yes	yes	なし
P	印刷	yes	yes	新しいwindowでブラウザを開く/no
Q	なし		なし	ブラウザ(全ページ)を閉じるブラウザを閉じる/no
R	なし		なし	ページの再読み込み/no
S	なし		なし	スクリーンショットを取る/yes
T	ブックマーク操作	no	新しいタブで同じページを開く/yes	設定画面へ移動/yes
V	pasteしつつデバッグウィンドウで操作されたDOMを可視化	yes	なし	paste/yes
W	ブラウザ(全ページ)を閉じる	no	yes	no
Z	Redo	yes	なし	yes
Backspace	なし		後方の単語の削除/yes	なし
Delete	閲覧履歴の削除	yes	yes	なし
Enter	なし		改行/yes	なし
Arrow,Home,End,Pageup,Pagedown	選択しながらフォーカス移動	yes	yes	yes

さいごに

全てのキーを押して試しました。眩暈が。。。しかし、Mac OSはもっときつかった。

ミスや漏れがあったらご指摘いただけたら嬉しいです。