Commit | Line | Data |
---|---|---|
6a1aa64f DV |
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
2 | "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |
3 | <html xmlns="http://www.w3.org/1999/xhtml"> | |
4 | <head> | |
5 | <title>Signal Example</title> | |
6 | <link href="key_events.css" rel="stylesheet" type="text/css" /> | |
7 | <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script> | |
8 | <script type="text/javascript" src="key_events.js"></script> | |
9 | </head> | |
10 | <body> | |
11 | ||
12 | <h1> | |
13 | Key Events with MochiKit | |
14 | </h1> | |
15 | <p> | |
16 | This is an example of one might implement a key listener with | |
17 | MochiKit’s Signal. | |
18 | </p> | |
19 | <p> | |
20 | For a detailed description of what happens under the hood, check out | |
21 | <a href="key_events.js" class="view-source">key_events.js</a>. | |
22 | </p> | |
23 | ||
24 | <p> | |
25 | View Source: [ | |
26 | <a href="index.html" class="view-source">index.html</a> | | |
27 | <a href="key_events.js" class="view-source">key_events.js</a> | | |
28 | <a href="key_events.css" class="view-source">key_events.css</a> | |
29 | ] | |
30 | </p> | |
31 | ||
32 | <p>Check this box to test <a href="http://mochikit.com/doc/html/MochiKit/Signal.html#fn-preventdefault"> | |
33 | preventDefault()</a> in your browser: | |
34 | <input type="checkbox" id="stopBox" /></p> | |
35 | ||
36 | <p id="specialMessage">This text is replaced with a message when you press Escape or F1.</p> | |
37 | ||
38 | <table> | |
39 | <tr> | |
40 | <th>Event</th> | |
41 | <th>Key Code</th> | |
42 | <th>Key String</th> | |
43 | </tr> | |
44 | <tr> | |
45 | <td>onkeydown</td> | |
46 | <td id="onkeydown_code">-</td> | |
47 | <td id="onkeydown_string">-</td> | |
48 | </tr> | |
49 | <tr> | |
50 | <td>onkeyup</td> | |
51 | <td id="onkeyup_code">-</td> | |
52 | <td id="onkeyup_string">-</td> | |
53 | </tr> | |
54 | <tr> | |
55 | <td>onkeypress</td> | |
56 | <td id="onkeypress_code">-</td> | |
57 | <td id="onkeypress_string">-</td> | |
58 | </tr> | |
59 | </table> | |
60 | ||
61 | <h3>Modifiers</h3> | |
62 | <table> | |
63 | <tr> | |
64 | <th>Shift</th> | |
65 | <th>Ctrl</th> | |
66 | <th>Alt (Option)</th> | |
67 | <th>Meta (Command)</th> | |
68 | </tr> | |
69 | <tr> | |
70 | <td id="shift">-</td> | |
71 | <td id="ctrl">-</td> | |
72 | <td id="alt">-</td> | |
73 | <td id="meta">-</td> | |
74 | </tr> | |
75 | </table> | |
76 | ||
77 | </body> | |
78 | </html> |