Source of keyEventTest.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="xLibrary.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<script>
function startTest() {
  xAddEventListener(document,"keydown", function(e) { keyEvent(e,"down")},true );
  xAddEventListener(document,"keypress", function(e) { keyEvent(e,"press")},true );
  xAddEventListener(document,"keyup", function(e) { keyEvent(e,"up")},true );
  if (window.opener) {
    try {
      var popText = document.getElementById("popup"); 
      popText.style.display = "none";
    } catch(e) {}
  }
}
 
function openPopup() {
  if (!window.opener) window.open("keyEventTest.htm","_blank","width=800,height=1000,menubar=no,location=no,scrollbars=yes");
}
 
function keyEvent(be,t) {
  var e = new xEvent(be);
  var h = "<h3>Event: " + be.type + "</h3>";
  var disButton = document.getElementById("disable");
  var xDisplay  = document.getElementById("xEventDisplay")
  var p,i;
  
  if (xDisplay.checked) {
    for(var p in e) { h += p + ": " + e[p] + "<br />"; } 
    h += "<hr>";
  }
  
  for (p in be) { h += p + ": " + be[p] + "<br />"; } 
  var c = xGetElementById(t); c.innerHTML = h;
  if (be.type == "keydown") {
    c = xGetElementById("press"); if (c) c.innerHTML = "&nbsp;";
    c = xGetElementById("up"); if (c) c.innerHTML = "&nbsp;";
  }
  if (disButton.checked) {
    xPreventDefault(be);
    xStopPropagation(be);
  }
}
  
xAddEventListener(window,"load",startTest);
</script>
</head>
<body id="body">
<h3>Key event test page</h3>
<p>Press any key; the properties of the <i>event</i> object passed to <b>
keypress</b>, <b>keydown</b> and <b>keyup</b> event will be displayed below.</p>
<p id="popup">You can also test the same events in a <a href="javascript:openPopup()">
pop-up window</a> without toolbars and menus.</p>
<p><input type="checkbox" name="disable" id="disable" checked="yes" /> Disable 
event propagation (disable default browser action if possible).<br />
<input type="checkbox" name="xEventDisplay" id="xEventDisplay" /> Display the 
properties of the xEvent object from the X library</p>
<div style="float: left; width: 30%; margin: 0 3pt;" id="press">&nbsp;</div>
<div style="float: left; width: 30%; margin: 0 3pt;" id="down">&nbsp;</div>
<div style="float: left; width: 30%; margin: 0 3pt;" id="up">&nbsp;</div>
</body>
</html>