Key Events with MochiKit : KeyEvents « Mochkit « JavaScript DHTML

Key Events with MochiKit
 
<!--
MochiKit is dual-licensed software.  It is available under the terms of the
MIT License, or the Academic Free License version 2.1.  The full text of
each license is included below.
-->

<!-- Code revised from MochiKit demo code -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Signal Example</title>
    <style type="text/css">
h1 {
    font-size: 2em;
    color: #4B4545;
    text-align: center;
}    
    </style>
    <script type="text/javascript" src="MochiKit-1.4.2/lib/MochiKit/MochiKit.js"></script>
    <script type="text/javascript">
/*

    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;
        }
    });    
    </script>
</head>
<body>

    <h1>
        Key Events with MochiKit
    </h1>
    <p>
        This is an example of one might implement a key listener with
        MochiKit&#8217;s Signal.
    </p>
    <p>
        For a detailed description of what happens under the hood, check out
        <a href="key_events.js" class="view-source">key_events.js</a>.
    </p>

    <p>
        View Source: [
            <a href="index.html" class="view-source">index.html</a> | 
            <a href="key_events.js" class="view-source">key_events.js</a> |
            <a href="key_events.css" class="view-source">key_events.css</a>
        ]
    </p>

    <p>Check this box to test <a href="http://mochikit.com/doc/html/lib/MochiKit/Signal.html#fn-preventdefault">
    preventDefault()</a> in your browser:
    <input type="checkbox" id="stopBox" /></p>
    
    <p id="specialMessage">This text is replaced with a message when you press Escape or F1.</p>
    
    <table>
        <tr>
            <th>Event</th>
            <th>Key Code</th>
            <th>Key String</th>
        </tr>
        <tr>
            <td>onkeydown</td>
            <td id="onkeydown_code">-</td>
            <td id="onkeydown_string">-</td>
        </tr>
        <tr>
            <td>onkeyup</td>
            <td id="onkeyup_code">-</td>
            <td id="onkeyup_string">-</td>
        </tr>
        <tr>
            <td>onkeypress</td>
            <td id="onkeypress_code">-</td>
            <td id="onkeypress_string">-</td>
        </tr>
    </table>
    
    <h3>Modifiers</h3>
    <table>
        <tr>
            <th>Shift</th>
            <th>Ctrl</th>
            <th>Alt (Option)</th>
            <th>Meta (Command)</th>
        </tr>
        <tr>
            <td id="shift">-</td>
            <td id="ctrl">-</td>
            <td id="alt">-</td>
            <td id="meta">-</td>
        </tr>
    </table>    

</body>
</html>
Key Events with MochiKit : KeyEvents « Mochkit « JavaScript DHTML

Related examples in the same category
