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

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

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

以前、「主要ブラウザのファンクションキー割り当て」で軽く触れましたが、Webシステム上でファンクションキーを使ったショートカットキーを実装したいという要望がクライアントからありました。

こういった要望は特に目新しいものではないと思いますが、いい感じの Javascript プラグインを見つけたのでご紹介したいと思います。

かなり使いやすいので皆さんもぜひ試してみてください。

デモページはこちら


shortcut.jsをダウンロードする

まず、こちらのサイトから shortcut.js をダウンロードします。

Handling Keyboard Shortcuts in JavaScript

画面下の方に行くと、ダウンロードのリンクがあります。

shortcut.jsをダウンロード

shortcut.jsの使い方

shortcut.js には shortcut.add()、shortcut.remove() の2つのメソッドが用意されています。

shortcut.add() には5つの引数(オプション)が用意されています。

オプション説明
typeString'keydown','keyup','keypress' のいずれかで指定できます。デフォルトは 'keydown' です。
disable_in_inputBooleaninput 要素の上でショートカットキーを押した場合、動作させるかどうかを指定できます。1つのキーでショートカットを作る場合で、テキストボックスがあるような場合、例えば 1 とか a とかを利用する場合は、true にしておかないと、input 要素で入力ができなくなります。デフォルトは false です。
targetDOM Nodeキーボードのイベントを拾うときの要素を指定できます。使い方はちょっとわかりません。デフォルトは 'document' です。
propagateBooleanショートカットキー実行後、ブラウザへイベントを移すかどうかが指定できます。例えば true にして Ctrl+A にショートカットキーを実装した場合、ショートカットキーのイベント+全選択(ブラウザ操作)を同時におこなうことができます。
keycodeIntegerキーコードを数字で指定できます。例えばキーコード A は 65番です。指定したキーで動かない場合に直接数字を指定します。

実装方法はこんな感じです。

shortcut.add("Ctrl+B",function() {
  alert("Hello world !");
},{
  'type':'keydown',
  'propagate':true,
  'target':document
});

shortcut.remove() の引数は1つです。shortcut.add() で指定したショートカットキーを指定します。

shortcut.add("Ctrl+B",function() {
  alert("Bold");
});
//Remove the shortcut
shortcut.remove("Ctrl+B");

デモページ を用意しているので、こちらを参考に実装してみてください。

もちろん 本家サイト でもデモがあります。

まとめ

JavaScriptでショートカットキーを実装する方法を紹介しました。

とても簡単に使えますんで、結構お気に入りです。jQuery の読み込みなしで使えるのも手軽さの一つではないでしょうか。

使う場合は、出来るだけブラウザのショートカットと被らないように実装することをおすすめします。

おつかれさまでした。

この記事がお役に立ちましたら シェア をお願いいたします。