ContentEditableでpreventDefault可能なショートカットキー一覧(Windows編)

## はじめに

本記事はWindows上での動作を想定しています。[Mac OSはこちら](https://qiita.com/pochman/items/3aa40ad71e5320192820)

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

特に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はもっときつかった。

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