| 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> |