Cross browser key event handling with Javascript and Swell

admin — Tue, 31 Mar 2009 13:04:22 +0000

Handling keyboard events with Javascript is an extremely difficult task considering each browser discrepancies.

One guy compiled all the differences into a single page that he adequately called “Javascript madness : Keyboard events“, and from there you can clearly see the real madness

Of course we have directly experienced the aforementioned problems and found out pretty smart solutions for almost any browser.

The two major headaches were IE not firing keypress event on specific keys and Opera not able to prevent default behavior of keydown event.

HTMLEvents magic or how to fix messy browser implementation

The special keys encompass all the keys that don’t cause a character to appear, but execute a certain function. Among these keys we can find shift, escape, pageDown, enter and so on.

Some general caveats (courtesy of quirksmode) :

IE doesn’t fire the keypress event for delete, end, enter, escape, function keys, home, insert, pageUp/Down and tab.
Onkeypress, Safari gives weird keyCode values in the 63200 range for delete, end, function keys, home and pageUp.Down. The onkeydown and -up values are normal.
Alt, Cmd, Ctrl and Shift cannot be detected on Mac, except in Opera. However, you can always use the altKey, ctrlKey, and shiftKey properties.

For getting rid of this weird behavior we are capturing special keys on keydown and use a static property to hold the keyname (keymapper) and keycode that we use when keypress event is fired.

As we didn’t want to hack our code too much we just simulate the keypress event on IE when the unsupported special keys are pressed.

// Check if keypressed is a special key
_specialKeyName = this.getSpecialKeyName(e.getKeyCode());
if(_specialKeyName) {
    this._specialKey = _specialKeyName;
    this._keyCode    =  e.getKeyCode();
    // This is a special key, we know that IE will not fire
    // keypress event, we'll do it for him :D
    if(Swell.Core.Browser.isIE) {
        this.simulate(o, 'keypress');
    }
}
 
/**
 * Fires programmatically a native DOM event
 * @function simulate
 *
 * @param {String|HTMLElement|Array} o the object to assign the handler to
 * @param {String} type event type : click, change, keypress, etc, never prepend "on" keyword as Swell does this job for you
 *
 * @see https://developer.mozilla.org/en/DOM/element.dispatchEvent
 * @see http://msdn.microsoft.com/en-us/library/ms536390(VS.85).aspx
*/
simulate : function(o, e) {
    var _event;
    // Testing if o is an object or a string
    // add is just dealing with DOM events, and is not meant to
    // handle custom events of Swell Objects
    // as Swell.Core.Dom is not part of the core distribution <~20K :D
    // We will use the good old document.getElementById for element retrieval
 
    if(Swell.Core.isString(o)) {
        o = _getById(o);
    } else if(Swell.Core.isArray(o)) {
        // Loop on function
        for(var n = 0; n &lt; o.length; n++) {
            this.simulate(o[n], e);
        }
        o = null;
    }
 
    if(!o) {
        return;
    }
    if(document.createEventObject) { // IE
        _event = document.createEventObject();
        return o.fireEvent('on' + e, _event);
    }
    else {
        // All other browsers
        _event = document.createEvent('HTMLEvents');
        _event.initEvent(e, true, true); //event type,bubbling,cancellable
        return !o.dispatchEvent(_event);
    }
},

SwellJS - another big fish in the sea » key handling

Cross browser key event handling with Javascript and Swell

HTMLEvents magic or how to fix messy browser implementation