はじめに
本記事は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対応はほんとキツイです。
間違いに気づいたらごしていき頂ければ幸いです。