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を使わないJavaScriptで、デフォルトイベントをキャンセルする方法が、このページで説明されている。IEとそれ以外のブラウザで、方法が異なる*1。

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:またか…

atsukanrockのブログ

Microsoft系技術を中心にぼちぼち更新します