JavaScriptでショートカットキーを実装する色々な方法

2012-10-23

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というプラグインもなかなか良さ気です。
こちらは自分で試してないので、使えるかどうかは不明ですが、一応メモしておきます。