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

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

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

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

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

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

デモページはこちら

Sponsored Links


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

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

Handling Keyboard Shortcuts in JavaScript

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

shortcut.jsをダウンロード

Sponsored Links

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");

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

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

まとめ

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

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

おつかれさまでした。

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

Sponsored Links