LoginSignup
5

More than 3 years have passed since last update.

JavaScriptで特定のキー入力をトリガーにしたい

Last updated at Posted at 2020-12-16

はじめに

JavaScript Advent Calendar 2020 17日目の記事です。

「マウスを使わずにキーボードだけで操作して効率UPしているぜ!」という人が一定数いそうなので、Webアプリを作るならキーボードだけでも操作できるようにしようかなと思っています。

作ったWebアプリに...

例えば自作のマークダウンメモアプリに、ショートカットキーで操作する機能を付けたくなったとします。

「WindowsならCtrl + /を、MacならControl + /を押して、"マークダウン記法の一覧"を表示できるようにしたい。」

イベントの取得

何かキーボードのキーが押されたことを検知するのは、とても簡単です。

document.addEventListener('keydown', event => {
    // 変数eventの中身はKeyboardEventオブジェクト
    console.log(event);
});

ビューポート内にフォーカスが当たっていれば取得できます。

キーの識別に使えるKeyboardEventのプロパティ

  • key : ShiftキーやOptionキーによる変化を考慮して、キーを現す文字列を返します。
  • code : 押されたキーそのものを現す文字列を返します。ただしJIS配列のキーボードでは、[の入力に対し"BracketRight"が出力されるなど直感的ではありません。今回はこれを使います。
  • keyCode : 非推奨。キーを現す一意な数値を返します。
  • which : 非推奨。keyCodeと同じ値が出力されます。
  • charCode : 非推奨。2020年12月17日時点で、ChromeやFirefox、Mac Safariではどのキーを押しても0が出力されます。

どのキーが押されたかを知る

手元にApple Keyboard A1843 EMC 3138(JIS配列)がありましたので、どのキーを押してどんな出力が得られるのかを調べてみました。
キーボードの各キーによって取得できるコード
KeyboardEvent.codeの取得結果は以下のSVGファイルに記してあります。

code一覧を見る(外部サイト)

今回の場合は/(スラッシュ)なので、event.code === "Slash"で判定ができます。

さらにWindowsならCtrlキーを、MacならControlキーを共に押していればevent.ctrlKeyがtrueになるため、それも調べます。

試してみる

かなり簡素なコードではありますが、Chromeなどの開発者ツールで手軽に試してみてください。

document.addEventListener('keydown', event => {
    if (event.ctrlKey && event.code === 'Slash') {
        // 処理を書く
        console.log('control + / です');
    }
});

参考リンク

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5