Key-Events-with-MochiKit


            

        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


    Signal Example
    
h1 {
    font-size: 2em;
    color: #4B4545;
    text-align: center;
}    
    
    
    
/*
    Key Events: A Really Simple Key Handler
    
*/
KeyEvents = {
    handled: false,
    handleF1: function() {
        replaceChildNodes('specialMessage', 'You invoked the special F1 handler!');
    },
    handleEscape: function() {
        replaceChildNodes('specialMessage', 'You invoked the special Escape handler!');
    },
    updateModifiers: function(e) {
        var modifiers = e.modifier();
        replaceChildNodes('shift', modifiers.shift);
        replaceChildNodes('ctrl', modifiers.ctrl);
        replaceChildNodes('alt', modifiers.alt);
        replaceChildNodes('meta', modifiers.meta);
    }
};
KeyEvents.specialKeyMap = {
    'KEY_F1': KeyEvents.handleF1,
    'KEY_ESCAPE': KeyEvents.handleEscape
};
connect(document, 'onkeydown', 
    function(e) {
        if (getElement('stopBox').checked == true) {
            e.preventDefault();
        }
        
        // We're storing a handled flag to work around a Safari bug: 
        // http://bugs.webkit.org/show_bug.cgi?id=3387
        if (!KeyEvents.handled) {
            var key = e.key();
            var fn = KeyEvents.specialKeyMap[key.string];
            if (fn) {
                fn();
            }
            replaceChildNodes('onkeydown_code', key.code);
            replaceChildNodes('onkeydown_string', key.string);
            KeyEvents.updateModifiers(e);
        }
        KeyEvents.handled = true;
    });
    
connect(document, 'onkeyup', 
    function(e) {
        if (getElement('stopBox').checked == true) {
            e.preventDefault();
        }
        
        KeyEvents.handled = false;
        var key = e.key();
        replaceChildNodes('onkeyup_code', key.code);
        replaceChildNodes('onkeyup_string', key.string);
        KeyEvents.updateModifiers(e);
    });
connect(document, 'onkeypress', 
    function(e) {
        if (getElement('stopBox').checked == true) {
            e.preventDefault();
        }
        
        var key = e.key();
        replaceChildNodes('onkeypress_code', key.code);
        replaceChildNodes('onkeypress_string', key.string);
        KeyEvents.updateModifiers(e);
    });
connect(window, 'onload',
    function() {        
        var elems = getElementsByTagAndClassName("A", "view-source");
        var page = "key_events/";
        for (var i = 0; i < elems.length; i++) {
            var elem = elems[i];
            var href = elem.href.split(/\//).pop();
            elem.target = "_blank";
            elem.href = "../view-source/view-source.html#" + page + href;
        }
    });    
    


    
        Key Events with MochiKit
    

    
        This is an example of one might implement a key listener with
        MochiKit’s Signal.
    

    
        For a detailed description of what happens under the hood, check out
        key_events.js.
    

    
        View Source: [
            index.html | 
            key_events.js |
            key_events.css
        ]
    

    Check this box to test 
    preventDefault() in your browser:
    

    
    This text is replaced with a message when you press Escape or F1.

    
    
        
            
            
            
        
        
            
            -
            -
        
        
            
            -
            -
        
        
            
            -
            -
        
    Event Key Code Key String
onkeydown
onkeyup
onkeypress

    
    Modifiers

    
        
            
            
            
            
        
        
            -
            -
            -
            -
        
    Shift Ctrl Alt (Option) Meta (Command)
Mochkit JavaScript DHTML

Key Events with MochiKit

Modifiers
