Mega Code Archive
Key Events with MochiKit
<![CDATA[
<!--
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’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>
]]>