はじめに
本記事は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はもっときつかった。
ミスや漏れがあったらご指摘いただけたら嬉しいです。