JavaScript DHTML/Mochkit/KeyEvents — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 07:25, 26 мая 2010
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’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.ru/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>