ショートカットキーのイベントを簡単に取得、設定できるライブラリ！「Mousetrap」

管理画面を作っていると、メモ帳やエディタみたいにctrl+sで入力内容を保存する仕組みを作りたいことって結構ありますよね。
そんな方にお勧めなのが、ショートカットキーのイベントを簡単に取得、設定できるライブラリ「Mousetrap」です。
jQueryも不要なので簡単に導入することができます。

導入方法

ダウンロード

GitHubにアクセスしてzipファイルをダウンロードしてください。
zipファイルを展開して、mousetrap.min.jsを適当なディレクトリにコピーしてください。

コード

まずプラグインを読み込みます。

<script src="mousetrap.min.js"></script>

ショートカットキーを押されたときの処理を記述します。
Mousetrap.bind(‘ショートカットキー’,function(){処理});
を記述することでイベントを制御できます。
‘ショートカットキー’の部分は’キー + キー’を記述することで同時押しの判定ができます。

// ctrl + cを押したとき
Mousetrap.bind('ctrl+c', function () {
    alert('ctrl + c を押しました！');
});

// ctrl + vを押したとき
Mousetrap.bind('ctrl+v', function () {
    alert('ctrl + v を押しました！');
});

// ctrl + fを押したとき
Mousetrap.bind('ctrl+f', function () {
    alert('ctrl + f を押しました！');
});

// ctrl + sを押したとき
Mousetrap.bind('ctrl+s', function () {
    alert('ctrl + s を押しました！');
    //ブラウザの機能を停止したい場合はreturn falseを記述
    return false; 
});

// aを押したとき
Mousetrap.bind('a', function () {
    alert('a を押しました！　ショートカットキー以外もイベント取得できます！');
});

[btn class=”rich_pink”]デモ確認[/btn]

キーボードを押した順番でイベントを発火させる

指定の順番でキーボードを押したときにも処理をキーイベントを取得することができます。
キーとキーの間に+ではなくスペースを記述してください。

// a b c d e fの順番で押されたとき
Mousetrap.bind('a b c d e f', function () {
    alert('a b c d e f の順番で押されました！');
});

// ctrl shift altの順番で押されたとき
Mousetrap.bind('ctrl shift alt', function () {
    alert('ctrl shift alt の順番で押されました！');
});

// t e s tの順番で押されたとき
// 間にスペースがないとイベントを取得できません。
Mousetrap.bind('test', function () {
    alert('test の順番で押されました！ このアラートは表示されません');
});

[btn class=”rich_pink”]デモ確認[/btn]

複数のキーイベントに対応

複数のキーイベントに対応することができます。
たとえばwindowsのctrl+cとmacのcommand+cが押されたとき、同じ処理をしたい場合などに利用できます。

// ctrl+cもしくはcommand+cを押された場合
Mousetrap.bind('ctrl+c,command+c', function () {
    alert('ctrl+cもしくはcommand+cが押されました！');
});

[btn class=”rich_pink”]デモ確認[/btn]