ウェブページにキーボード・ショートカットを追加するJavaScript、shortcut.js。

ウェブページに、JavaScriptで独自のキーボード・ショートカットを追加してみましょう。

1から自分で書くのも良いけれど、キーコードを調べたりするのが面倒くさかったりします。以下のページで配布されている shortcut.js を利用します。

→ Handling Keyboard Shortcuts in JavaScript

上記ページからダウンロードした shortcut.js を適当な場所に置いて、ショートカットを追加したいページに読み込みます。

<script src="設置したパス/shortcut.js"></script>

で、ショートカットを追加するには、関数 shortcut.add を呼ぶだけです。shortcut.add() の引数は3つ。

shortcut.add( shortcut_combination , callback , opt);

引数はそれぞれ…

  • shortcut_combination：ショートカットのキーコンビネーションを記述します。
    書式："モディファイアキー [+モディファイアキー…] + キー"。 すなわち、"Ctrl+W" とか "Alt+P" とか "Shift+Alt+A" のように記述します。
    使用できるキーは公式ドキュメントを参照してください。
  • callback：ショートカットキーが押されたときに呼び出される関数。
    この関数は、引数としてイベントオブジェクトを取ることができます。これ以外の引数を渡したいときは、たとえば callback を funciton(){ func( param1,param2 .. )} みたいに記述してやれば、引数付きの関数 func を呼ぶことができます。
  • opt：オプション。
    • 'type' ：トリガーするイベント名。初期値は 'keydown'。
    • 'propagate'：イベントを次に伝播をさせるかどうか。初期値は false（伝播を止める）。
    • 'disable_in_input'：textarea などのフィールドで、ショートカットキーを無効にするかどうか。初期値は false（無効にしない）。
    • 'target'：ショートカットキーを有効にする要素。初期値は document（ページ全体）。特定の要素上のみで有効にさせるときは 'target' に document.getElementById('要素のid')、または単に '要素のid' を指定する。
    • 'keycode'：このオプションにキーコードを指定して、shortcut.add() の引数 shortcut_combination を ''（空白）にすると、このキーコードが押された際にコールバック関数が呼ばれる。初期値は false。

    初期値から変更したいパラメータだけ指定してやれば良いということで、例えば…

    var opt = { 'propagate' : true , 'target' : 'test-area' };

    のように書きます。

例として、「テキストエリア（id="test-area"）がアクティブのとき、Ctrl + A を押すと、カーソル位置に "ショートカットa" というテキストを挿入し、Ctrl + B を押すと "ショートカットb" を挿入する」というのを書いてみます。

<textarea id="test-area" style="width:250px;height:200px;"></textarea>

<script src="設置したパス/shortcut.js"></script>
<script>
var opt = { 'target' : 'test-area' } ;//オプションを指定して…

shortcut.add( "Ctrl+A" , insert_text , opt ) ; //Ctrl + A にショートカットを追加
shortcut.add( "Ctrl+B" , insert_text , opt ) ; //Ctrl + B にショートカットを追加

//コールバック関数 insert_text。
//引数はイベントオブジェクト。
function insert_text( evt ){
    var key = evt.key ; //イベントからキーを取得
    var target = evt.target ; //イベントが生じた要素（id="test-area"）
    var str = 'ショートカット' + key ; //挿入するテキスト
    var cursor = target.selectionStart ; //現在のカーソル位置
    target.value = target.value.substr( 0 , cursor ) + str + target.value.substr( cursor ) ; //テキストを挿入
}

</script>

実際に動作確認。下のテキストエリアをアクティブにしたら、Ctrl+A または Ctrl+B を押してみてください。

上手くいきました。ね?

オプションのパラメータ "propagate" を true に指定すると、ここで設定したショートカットを実行した後に、ブラウザ自体で設定されているショートカットが（もし同じキーバインドのショートカットがあれば）実行されてしまいます。

例えば Ctrl+A だったら全選択、Ctrl+Bだったらブックマーク、などなど。

逆に "propagage" を false にすると、ブラウザのショートカットが実行されません。上の例では、テキストエリアがアクティブのときには「Ctrl + A で全選択」という操作ができなくなります。

ということで。

カテゴリ:

タグ: