はじめに

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

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

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

概略

OSやブラウザ本体の制御に近いものほどpreventDefaultできない。
想像以上にショートカットの種類があった。
Mac OSの場合はkeydownだけでなくbeforeinputでしかキャンセルできない物がある（参考：過去の投稿記事）。

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

環境

OS: Mac OS 10.14.6
Safari 13.0.4
Chrome 79.0.3945.117
Firefox 72.0.1

表のみかた

キーボードでキー入力した場合にブラウザの行うデフォルト動作と、keydownイベント、および、beforeinputイベントにおいてpreventDefault()の有効／無効をyes or noで表に示します。preventDefault()でキャンセルできる場合はyes、キャンセルできない場合はnoとしました。先に書いてある方がkeydownイベント、後に書いてある方がbeforeinputイベントです。動作はSafariでの動作を基本とし、それと異なる動作をするブラウザではその旨を併記しました。"なし"と書いてあるところは特にデフォルト動作が無いことを意味します。

ただし、Firefoxではkeydownのみが調査対象です。これはFirefoxではbeforeinputを使う必要が無いからです（参考：過去の投稿記事）

単独キー入力(without Modifier key)

key	動作	Safari	Chrome	Firefox
A-Z,1-9	文字入力	no/yes	yes/yes	yes
1文字分の長さの記号(括弧やカンマなど)	文字入力	no/yes	yes/yes	yes
delete	前方文字を消す	yes/yes	yes/yes	yes
backspace	後方文字を消す	yes/yes	yes/yes	yes
Enter	改行する(段落を区切る)	yes/yes	yes/yes	yes
Arrow	カーソル移動	yes/no	yes/no	yes

Commandと同時に押した場合

key	動作	Safari	Chrome	Firefox
A	全選択	yes/no	yes/no	yes
B		なし	yes/yes	ブックマークを開く/yes
C	選択領域をCopy	yes/no	yes/no	yes
D	ブックマーク追加	yes/no	yes/no	yes
F	page内を検索	yes/no	yes/no	yes
G	検索中に次の候補へカーソル移動	yes/no	yes/no	なし
H	ブラウザを最小化	no/no	ブラウザを閉じる/yes/no	yes
I		メールアカウントのウィンドウをだす/yes/no	選択領域をitalicにする/yes/yes	ページ情報のwindowを表示/yes
J		なし	なし	ブラウジングライブラリー/yes
K	URL windowで検索(Eと同じ)	なし	なし	yes
L	URL バーへカーソル移動	no/no	なし	yes
M	ゴミ箱の横に最小化	no/no	yes/no	yes
N	新しいwindowsでブラウザを開く	no/no	no/no	no
O	ファイルを開く	no/no	yes/no	yes
P	ページの印刷	yes/no	yes/no	yes/no
Q	ブラウザを閉じる	no/no	no/no	no
R	ページの再読み込み	no/no	yes/no	yes
S	ページ(html)の保存	no/no	yes/no	yes
T	新しいタブを開く	no/no	no/no	no
U	選択領域にunderlineを引く	なし	なし	ソースを開く/yes
V	Paste	no/yes	yes/yes	yes
W	ブラウザ(タブ)を閉じる	no/no	no/no	no
X	切り取り	no/no	yes/no(コピーのみされる)	yes
Y	履歴を表示	no/no	yes/no	なし
Z	Undo	no/yes	yes/yes	yes
1-9	タブブラウザの切り替え	no/no	yes/no	yes
0	なし
-	ページを縮小	yes/no	yes/no	yes
=	なしページを拡大	なし	なし	yes
;	次の英単語へ移動	/yes/no	yes/no	ページを拡大/yes
+	ページを拡大	yes/no	yes/no	yes
^	なし
@	なし
`[`		履歴に合わせてページ遷移/yes/no	なし	yes
`]`		履歴に合わせてページ遷移/yes/no	なし	yes
:	辞書登録？	yes/no	yes/no	なし
/	なし	「ステータスバーはオンです」の表示/yes/no	なし	なし
,	ブラウザの設定画面を開く	no/no	yes/no	no
.	なし
space	spotlite検索	no/no	no/no	no
delete	なし
backspace	現在位置から行の先頭まで削除	yes/no	yes/yes	yes
enter	なし
RightArrow	前方へ単語単位で移動	行の末尾へ移動/yes/no	yes/no	yes
LeftArrow	後方へ単語単位で移動	行の先頭へ移動/yes/no	yes/no	yes
UpArrow	文章の先頭へ移動	/yes/no	yes/no	yes
DownArrow	文章の末尾へ移動	/yes/no	yes/no	yes

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

（Shift無しの場合と動作が異なるものだけ記載）

key	動作	Safari	Chrome	Firefox
A		なし	なし	アドオンマネージャー/yes
B	お気に入りリンクのバーを出す	yes/no	yes/no	ブラウジングライブラリーを開く/yes
C	デバッグwindowを表示	yes/no	yes/no	yes
D	時計が動く(謎)	yes/no	ブックマーク編集/yes/no	yes
H		なし	ホーム画面へ移動/yes/no	履歴の検索/yes
J		なし	ダウンロード履歴/yes/no	デバッグコンソールを別windowで開く/yes
L	リーディングリスト	yes/no	なし	なし
M		なし	ユーザーログイン/yes/no	なし
N	プライベートブラウズで新しいwindowを開く	yes/no	no/no	新しいwindowでブラウザを開く/yes
Q	OSからログアウト	no/no	no/no	no
R	ページ全体の表示の切り替え	yes/no	yes/no	yes
S		なし	なし	スクリーンショートカット/yes
T		なし	ダウンロード履歴から検索/no/no	アドオンマネージャー/yes
X		なし	なし	全て右寄せにする/yes
Z	Redo	yes/yes	yes/yes	yes
Arrow,Home,End,Pageup,Pagedown	選択しながらフォーカス移動	yes/no	yes/no	yes

Command+Optionと同時に押した場合

（option無しと動作が同じものは省略）

key	動作	Safari	Chrome	Firefox
A	デバッグwindowを開く	yes/no	なし	なし
B	ブックマーク	yes/no	yes/no	なし
C	デバッグwindowを表示	yes/no	yes/no	yes
D	下のMac特有のアプリのバーが消える	no/no	no/no	no
F	URLwindowでお気に入り選択	yes/no	URLwindowにカーソルが移動/yes/no	URIwindowで検索/yes
I	デバッグwindowを表示	yes/no	yes/no	yes
J	デバッグwindowを表示	なし	yes/no	なし
K	デバッグwindowを表示	なし	なし	yes
M		なし	なし	モバイル機器表示エミュレータ/yes
U		なし	なし	ソースの表示/yes
Z	デバッグwindowを表示	なし	なし	yes
1-9	お気に入り？おすすめ？の1-9番のページへ移動	yes/no	なし	なし

最後に

全部のキーを実際に押して試しました。beforeinputがある分、windowsでの検証の倍時間が掛かった。開発においてはbeforeinputとkeydownの使い分けが必要で、Mac OS、特にSafari対応はほんとキツイです。

間違いに気づいたらごしていき頂ければ幸いです。