Key Events with MochiKit

   <source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

       "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

Key Events with MochiKit

This is an example of one might implement a key listener with MochiKit’s Signal.

For a detailed description of what happens under the hood, check out <a href="key_events.js" class="view-source">key_events.js</a>.

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

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

This text is replaced with a message when you press Escape or F1.

Event	Key Code	Key String
onkeydown	-	-
onkeyup	-	-
onkeypress	-	-

Modifiers

Shift	Ctrl	Alt (Option)	Meta (Command)
-	-	-	-

</body> </html>

 </source>

JavaScript DHTML/Mochkit/KeyEvents