管理画面を作っていると、メモ帳やエディタみたいにctrl+sで入力内容を保存する仕組みを作りたいことって結構ありますよね。
そんな方にお勧めなのが、ショートカットキーのイベントを簡単に取得、設定できるライブラリ「Mousetrap」です。
jQueryも不要なので簡単に導入することができます。
導入方法
ダウンロード
GitHubにアクセスしてzipファイルをダウンロードしてください。
zipファイルを展開して、mousetrap.min.jsを適当なディレクトリにコピーしてください。
コード
まずプラグインを読み込みます。
1 | <script src="mousetrap.min.js"></script> |
ショートカットキーを押されたときの処理を記述します。
Mousetrap.bind(‘ショートカットキー’,function(){処理});
を記述することでイベントを制御できます。
‘ショートカットキー’の部分は’キー + キー’を記述することで同時押しの判定ができます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | // 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]
キーボードを押した順番でイベントを発火させる
指定の順番でキーボードを押したときにも処理をキーイベントを取得することができます。
キーとキーの間に+ではなくスペースを記述してください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 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が押されたとき、同じ処理をしたい場合などに利用できます。
1 2 3 4 | // ctrl+cもしくはcommand+cを押された場合Mousetrap.bind('ctrl+c,command+c', function () { alert('ctrl+cもしくはcommand+cが押されました！');}); |
[btn class=”rich_pink”]デモ確認[/btn]
