ウェブページに、JavaScriptで独自のキーボード・ショートカットを追加してみましょう。
1から自分で書くのも良いけれど、キーコードを調べたりするのが面倒くさかったりします。以下のページで配布されている shortcut.js を利用します。
→ Handling Keyboard Shortcuts in JavaScript
上記ページからダウンロードした shortcut.js を適当な場所に置いて、ショートカットを追加したいページに読み込みます。
で、ショートカットを追加するには、関数 shortcut.add を呼ぶだけです。shortcut.add() の引数は3つ。
引数はそれぞれ…
- 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" を挿入する」というのを書いてみます。
<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 で全選択」という操作ができなくなります。
ということで。
コメント