Question

I’m writing a Javascript class to handle keystrokes as well as keystroke combinations. For example, the following would add a callback for the SHIFT key.

MYAPP.Keyboard.instance().observe(
    MYAPP.Keyboard.type.KEYDOWN,
    MYAPP.Keyboard.key.SHIFT,
    function() {
        $$('body').first().addClassName('keyboardHintShow');
    }
);

An example for SHIFT+F would be:

MYAPP.Keyboard.instance().observe(
    MYAPP.Keyboard.type.KEYUP,
    [MYAPP.Keyboard.key.F, MYAPP.Keyboard.key.SHIFT],
    function() {
        MYAPP.Broadcast.instance().signal('file');
    }
);  

This is working great in Firefox so far, but not when I attempt to use ALT as a modifier. Two problems arise. 1) Event propogation does not stop, so Firefox’s File menu pops up. 2) After releasing ALT and F, only F‘s onKeyUp fires, so the state of ALT is wrong. What makes ALT so different from SHIFT?

Here’s the complete code:

MYAPP.Keyboard = Class.create({

/*******************************************************************************
PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC PUBLIC PUB
*******************************************************************************/

    /**
     * @return pointer
     */
    initialize: function() {
        this.downKeys = new Hash();
        this.observers = new Hash();

        document.observe(
            'keydown',
            this.onKeyDown.bind(this)
        );

        document.observe(
            'keyup',
            this.onKeyUp.bind(this)
        );
    },

    /**
     * @param MYAPP.Keyboard.type type
     * @param MYAPP.Keyboard.key | array of MYAPP.Keyboard.key keys
     * @param void function() callback
     * @return void
     */
    observe: function(type, keys, callback) {
        var main;
        var modifiers;

        if (typeof(keys) === 'number') {
            main = keys;
            modifiers = [];
        } else {
            main = keys.first();
            modifiers = keys.slice(1);
        }

        if (this.observers.get(type) === undefined) {
            this.observers.set(type, new Hash());
        }

        this.observers.get(type).set(
            main, {
                modifiers: modifiers,
                callback: callback
            }
        );
    },

    /**
     * @param MYAPP.Keyboard.type type
     * @param MYAPP.Keyboard.key
     * @return void
     */
    stopObserving: function(type, key) {
        this.observers.get(type).unset(key);
    },

/*******************************************************************************
PRIVATE PRIVATE PRIVATE PRIVATE PRIVATE PRIVATE PRIVATE PRIVATE PRIVATE PRIVATE 
*******************************************************************************/

    /**
     * @param Event event
     * @return void
     */
    onKeyDown: function(event) {
        if (this.downKeys.get(event.keyCode) === true) {
            return;
        }

        this.downKeys.set(event.keyCode, true);

        var downObservers = this.observers.get(MYAPP.Keyboard.type.KEYDOWN);
        if (downObservers !== undefined) {
            this.runCallback(downObservers, event);
        }
        return false;
    },

    /**
     * @param Event event
     * @return void
     */
    onKeyUp: function(event) {
        this.downKeys.set(event.keyCode, false);

        var downObservers = this.observers.get(MYAPP.Keyboard.type.KEYUP);
        if (downObservers !== undefined) {
            this.runCallback(downObservers, event);
        }
        return false;
    },

    /**
     * @param Hash observers
     * @param Event event
     * @return void
     */
    runCallback: function(observers, event) {
        var overrideBrowser = false;
        var order = observers.get(event.keyCode);
        if (order !== undefined) {
            if (order.modifiers.size() === 0) {
                order.callback();
                Event.stop(event);
            } else {
                for (var i = 0; i < order.modifiers.size(); i++) {
                    var modifierStatus = this.downKeys.get(order.modifiers[i]);
                    if (modifierStatus === undefined || modifierStatus === false) {
                        return;
                    }
                    order.callback();
                    Event.stop(event);
                }
            }
        }
    }
});

/*******************************************************************************
STATIC STATIC STATIC STATIC STATIC STATIC STATIC STATIC STATIC STATIC STATIC STA
*******************************************************************************/

/**
 * @return Keyboard instance
 */
MYAPP.Keyboard.instance = function() {
    if (typeof(MYAPP.keyboard) === 'undefined') {
        MYAPP.keyboard = new MYAPP.Keyboard();
    }
    return MYAPP.keyboard;
};

/**
 * Event type
 */
MYAPP.Keyboard.type = {
    KEYUP: 0,
    KEYDOWN: 1 
};

/**
 * Keycodes for various keys.
 */
MYAPP.Keyboard.key = {
    SHIFT: 16,
    CTRL: 17,
    ALT: 18,
    A: 65,
    B: 66,
    C: 67,
    D: 68,
    E: 69,
    F: 70,
    G: 71,
    H: 72,
    I: 73,
    J: 74,
    K: 75,
    L: 76,
    M: 77,
    N: 78,
    O: 79,
    P: 80,
    Q: 81,
    R: 82,
    S: 83,
    T: 84,
    U: 85,
    V: 86,
    W: 87,
    X: 88,
    Y: 89,
    Z: 90
};

Answer 1

This may help as an example. At the bottom of the page the author claims that his script overrides all modifiers – Ctrl, Alt, Shift, Meta. Hope this help, somehow.