mousetrap.jsを使ったデモ

Mousetrap は 割り当てたキーボードのショートカットキーを押すと 指定したコールバックを実行させることが出来る javascript ライブラリです

このデモは Mousetrap v1.6.1を使用して作成しました。

npm i mousetrap --save

yarn add mousetrap

<script src="//unpkg.com/mousetrap@1.6.1/mousetrap.js"></script>

Ctrl + k 又は Command + k

// Ctrl + k OR Command + k
Mousetrap.bind(['command+k', 'ctrl+k'], (e) => {
 swal("success", "command + k 又は ctro + k が押されました", "info");
});

Shift + a

// Shift + a
Mousetrap.bind(['shift+a'], (e) => {
 swal("success", "shift + a  が押されました", "info");
});

g + i

//  g + i
Mousetrap.bind('g i', () => {
  swal("g + i", "gを押しながらiを押した時の処理", "info");
});

Ctrl + Shift + j

// Ctrl + Shift + j
Mousetrap.bind('ctrl+shift+j', (e, combo) => {
 swal("ctrl+shift+j", "ctrl + shift + jが同時押された時の処理", "info");
});

上 上 下 下 左 右 左 右 b a Enter

// コナミコマンド
  Mousetrap.bind('up up down down left right left right b a enter', () => {
    swal("上 上 下 下 左 右 左 右 b a enter", "コナミコマンドが入力されました", "success");
  });