Here’s a nice little extension I found on the mootools forums. It let’s you assign an action to any element when the element has focused and the user clicks a key. I haven’t played around with it yet, but it’s super small and looks useful for form inputs and whatnot. Credit goes to BlackMac.

/*
Script: keywatcher.js
    Here be Dragons
Dependencies:
    <Moo.js>, <Element.js>
Author:
    Stefan Lange-Hegermann, <http://www.blackmac.de/>
License:
    MIT-style license.
Credits:
    This only works with mootools
*/
Element.implement({
    /*
        Property: attachAllKeys
            makes the function passed listen to all keydown events
        Arguments:
            callback - the function that gets called when a key is pressed
            KeyCode is passed as the first parameter
        Example:
            >$E('html').attachAllKeys(keyListener);
    */
    attachAllKeys: function (callback) {
        this.callback=callback;
        if (!this.keyEventAdded) {
            this.onkeydown=this.keyDown;
        }
        this.keyEventAdded=true;
    },
    /*
        Property: attachKeys
            makes certain functions from an array listen to certain keys
        Arguments:
            keylist - the function that gets called when a key is pressed
            KeyCode is passed as the first parameter
        Example:
            >$E('html').attachKeys({54:functionOne, 55:functionTwo});
    */
    attachKeys: function (keylist) {
        if (!this.keyFunctions)
            this.keyFunctions={};
        Object.extend(this.keyFunctions, keylist);
        if (!this.keyEventAdded) {
            this.onkeydown=this.keyDown;
        }
        this.keyEventAdded=true;
        return this;
    },
    /*
        Property: attachKeys
            makes a certain function listen to a certain key
        Arguments:
            keyCode - the key code or the keys letter as a string
            callback - the function to call, when the key is hit
        Example:
            >$E('html').attachKey(54, functionOne);
    */
    attachKey: function (keyCode, callback) {
        var tmplist=[];
        if (typeof(keyCode)=="string") {
            keyCode = keyCode.toUpperCase().charCodeAt(0);
        }
        tmplist[keyCode]=callback;
        this.attachKeys (tmplist);
        return this;
    },
    // internal
    keyDown: function (event) {
        if (event.target == this) {
            if (this.keyFunctions) {
                if (this.keyFunctions[event.keyCode]) {
                    return this.keyFunctions[event.keyCode](event.keyCode);
                }
            }
            if (this.callback) {
                return this.callback(event.keyCode);
            }
        }
        return true;
    }
})

This entry was posted on Thursday, November 23rd, 2006 at 10:01 am and is filed under 3rd Party Libraries, Event Scripting, MooTools. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.