mochikit_v14/examples/key_events/index.html

   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&#8217;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>