Snippets

Home / Snippets / Javascript Key Shortcut Manager

Javascript Key Shortcut Manager

Snippet Menu

snippet |

revisions |

comments | Related Snippets

related |

Add to Favorites | Email

download | Print

print | Blog It

blog it

Tue. Dec. 4th, 2007 10:32 AM

1 of 1

HRCerqueira

JavaScript | Key | Web

2 comments

A simple, yet powerful (what a clich�) way of resgistering javascript keyboard shortcuts. Register any kind of keyboard shortcuts, and if applicable, override the browser default action.

Example usage and more info here:

Javascript Keyboard Shortcut Manager

var ShortcutMan = {};

ShortcutMan.getEventCode = function(evt) {

        //IE browsers don't pass the event object as an argument, so get them from the window object

        if (!evt)

                var evt = window.event;

        if (evt.keyCode) //on IE use keycode

                var code = evt.keyCode;

        else if (evt.which) //on mozilla use wich

                var code = evt.which;

        if (code >= 65 && code <= 90) //let's just use lower case codes

                code = code + 32;

        var ctrl = evt.ctrlKey ? 'c' : ''; //is ctrl pressed

        var alt = evt.altKey ? 'a' : ''; //is alt pressed

        var shift = evt.shiftKey ? 's' : '';  //is shift pressed

        return ctrl + alt + shift + code;        //put all the pieces together and return the string

}

//a hash to store the actions in code / action pairs

ShortcutMan.keyShortcuts = {};

ShortcutMan.registerShortcut = function(code, action) {

        //if the code is not in the correct form, do nothing

        if (!/^c?a?s?\d{1,3}$/.test(code))

                return;

        //store the action in the keyshortcut hash

        ShortcutMan.keyShortcuts[code] = action;

}

ShortcutMan.readShortcut = function(evt) {

    //convert the event object in a keyboard shortcut code

        var code = ShortcutMan.getEventCode(evt);

        //if there is an action associated with that keystroke

        if (typeof(ShortcutMan.keyShortcuts[code]) == 'function') {

                //execute it

                ShortcutMan.keyShortcuts[code]();

                //and override the browser default behaviour

                document.defaultAction = false;

        } else //otherwise just tell the browser to keep on what hes doing

                document.defaultAction = true;

        return document.defaultAction;

}

//attach the readShortcut method to the onkeypress event in the document

document.onkeypress = ShortcutMan.readShortcut;

Hern�ni Cerqueira

www.hrcerqueira.com

Comments

New Comment

Adjustments

Fri. Dec. 14th, 2007 4:23 PM

Fordiman

Quick note: I do believe that w3c browsers use the keyCode attribute of the event object as well, but only on the keydown/up event. On the press event you should use charCode.

The normal cross-browser method is evt.keyCode||evt.charCode for onKeyPress.

Also, it's generally better to use a cross-browser observe event function (there's a few on here) rather than overriding the document.onX property.

Last, just a stylistic note: you could have defined the members of the ShortcutMan object implicitly within the object definition, rather than explicitly as properties of the object.

Anyway, I've made the changes I'm referring to in the below code.

PS: by the by, I've never heard of document.defaultAction; what's it do?

var ShortcutMan = {

        //Stylistic: stitched all functions into single object declaration

        getEventCode: function(evt) {

                if (!evt) evt = window.event;

                //Stylistic: all initial declarations in a single 'var' declaration

                var 

                        code = evt.charCode||evt.keyCode,

                        ctrl = evt.ctrlKey ? 'c' : '',

                        alt = evt.altKey ? 'a' : '',

                        shift = evt.shiftKey ? 's' : '';

                if (code >= 65 && code <= 90)

                        code+=32;

                return ctrl + alt + shift + code;

        }

        keyShortcuts: {},

        registerShortcut: function(code, action) {

                if (!/^c?a?s?\d{1,3}$/.test(code))

                        return;

                ShortcutMan.keyShortcuts[code] = action;

        },

        readShortcut: function(evt) {

                var code = ShortcutMan.getEventCode(evt);

                //Stylistic: Save a few bytes by predefining the simple 'else' value,

                // and overriding that later

                document.defaultAction = true;

                //No need for a string comparison in a managed variable

                if (!!ShortcutMan.keyShortcuts[code]) {

                        ShortcutMan.keyShortcuts[code]();

                        //Slightly more complete events cancelling

                        if (!!evt.stopPropagation) evt.stopPropagation();

                        else evt.cancelBubble = true;

                        if (!!evt.prerventDefault) evt.preventDefault();

                        document.defaultAction=evt.returnValue=false;

                }                     

                return document.defaultAction;

        }

}

(function () {

        /*

        Rather the simplest cross-browser event observe operation

        Reason: doesn't get in the way of other global shortcut stuff

        Reason to function-wrap it: I use the temp variable '_' which 

                may be used in the global scope

        */

        var _=!!document.attachEvent;

        document[_?'attachEvent':'addEventListener']((_?'on':'')+'keypress',ShortcutMan.readShortcut);

})();