YAHOO! UI Libraryで、キーボードイベントを処理する
はじめに
YAHOO! UI Libraryでキーボードイベントを処理するためには、YAHOO.util.KeyListenerクラスを使う。その基本的な使い方を簡単に示し、進んだ使い方として、デフォルトイベントをキャンセルする方法を示す。
基本的な使い方
このページで述べられていることを抑えればOK。オフィシャルサイトのサンプルで、具体的な実装と動作のイメージが湧くだろう。
補足説明
APIには具体的に書かれていないのだが、特殊キーのキーコードが、定数として定義されている。以下に、該当部分のYUI(2.7.0b)のコードを抜粋する。
KeyListener.KEY = { ALT : 18, BACK_SPACE : 8, CAPS_LOCK : 20, CONTROL : 17, DELETE : 46, DOWN : 40, END : 35, ENTER : 13, ESCAPE : 27, HOME : 36, LEFT : 37, META : 224, NUM_LOCK : 144, PAGE_DOWN : 34, PAGE_UP : 33, PAUSE : 19, PRINTSCREEN : 44, RIGHT : 39, SCROLL_LOCK : 145, SHIFT : 16, SPACE : 32, TAB : 9, UP : 38 };
デフォルトイベントのキャンセル方法
YUIありの方法
YUIを使えば、ブラウザに依存しない(YUIが差異を吸収してくれる)方法を使える。以下の3つのメソッドだ。
- YAHOO.util.Event.preventDefault
- イベントのデフォルト動作をキャンセル。伝播はキャンセルしない
- YAHOO.util.Event.stopPropagation
- イベントの伝播をキャンセル。デフォルト動作はキャンセルしない
- YAHOO.util.Event.stopEvent
- stopPropagation+preventDefault
KeyListenerクラスの場合
これらのメソッドは、全てEventオブジェクトを引数に取る。では、YAHOO.util.KeyListenerクラスを使う場合に、どうやってEventオブジェクトを取得すればよいのだろうか。
実は、コールバック関数(コンストラクタの第3引数で指定)の第2引数で渡される配列の、インデックス1の位置にEventオブジェクトが格納されている。なので、それを上記のキャンセル系メソッドに渡せば良い。具体的なコードを以下に示す。
// txt2上で Shift+Tab が押されたら、txt1にフォーカスし、 // txt1に入力されている文字列がある場合、それを選択する new YAHOO.util.KeyListener("txt2", { alt: false, ctrl: false, shift: true, keys: YAHOO.util.KeyListener.KEY.TAB }, function() { var txt1 = YAHOO.util.Dom.get("txt1"); if (txt1) { txt1.focus(); txt1.select(); // Shift+Tab キーのデフォルト動作、伝播ともキャンセル YAHOO.util.Event.stopEvent(arguments[1][1]); } }).enable();
*1:またか…