Web画面にショートカットキーを実装する方法をご紹介。
取り立てて目新しい話では無いですが、ショートカットキーを実装する機会があったのでメモしておきます。
ショートカットキーを取り入れたい方はご参考ください。
ちなみにサンプルコードはjQueryを使った書き方をしていますが、両方ともjQueryは不要です。
ご自身の環境によって読み替えて下さいね。
1. JavaScriptで一から書く方法
ちょっと追加したいだけ、であれば自分で書くのが早いです。
Ctrlボタンとかと合わせて複合キーによるショートカットを使いたい場合は、後述のプラグインを使ったほうが良いです。
サンプルの説明
「q」のキーを押したら「#shortcut_button」というidのHTML要素をクリックするイベントを発生させます。
ショートカットキーを追加したい場合は、case文を追加していけばOKです。
$(document).keydown(function(e) {
switch (e.keyCode) {
case 76:
// Key: l
$("#shortcut_button").click();
break;
}
});
この方法の場合、キーコードを数値で指定する必要があります。キーコードを手っ取り早く知るには、What The Key Code?というサイトが便利。
何かキーを押すと、画面にキーコードが表示されます。
2.JavaScriptのプラグインを使う方法
shortcut.jsを使うと複合キーによるショートカットも簡単に実装できます。
使い方は簡単。
まずプラグインを読み込みます。
<script type="text/javascript" src="/js/shortcut.js"></script>あとはJavaScriptで下記のように記述するだけ。
これで「Ctrl+Enter」をクリックするショートカットキーが作れます。
$(function() {
shortcut.add("Ctrl+Enter",function() {
$("#button").click();
});
});
MOUSETRAPというプラグインもなかなか良さ気です。
こちらは自分で試してないので、使えるかどうかは不明ですが、一応メモしておきます。
