--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/key-event-test.html Thu Apr 25 13:32:34 2013 -0700
@@ -0,0 +1,491 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+
+<title>Keyboard Events</title>
+<meta http-equiv="content-type" content="text/html;charset=utf-8" />
+
+<style type="text/css">
+#options {
+ display: none;
+ margin: 20px;
+}
+#optionstoggle {
+ font-size: 10pt;
+}
+.opttable {
+ border: 1px solid black;
+}
+.optcell {
+ vertical-align: top;
+ padding: 0 10px;
+}
+.opttitle {
+ font-weight: bold;
+}
+.empty {
+ background-color: #ffffff;
+}
+.etype_header {
+ background-color: #d0d0d0;
+ font-weight: bold;
+ border: 1px solid black;
+}
+.legacy_header {
+ background-color: #80ff80;
+ font-weight: bold;
+ border: 1px solid black;
+}
+.modifiers_header {
+ background-color: #ff80ff;
+ font-weight: bold;
+ border: 1px solid black;
+}
+.olddom3_header {
+ background-color: #ffff80;
+ font-weight: bold;
+ border: 1px solid black;
+}
+.dom3_header {
+ background-color: #80ffff;
+ font-weight: bold;
+ border: 1px solid black;
+}
+.uievents_header {
+ background-color: #ffc080;
+ font-weight: bold;
+ border: 1px solid black;
+}
+.textinputdata_header {
+ background-color: #c0c0ff;
+ font-weight: bold;
+ border: 1px solid black;
+}
+.inputbox_header {
+ background-color: #d0d0d0;
+ font-weight: bold;
+ border: 1px solid black;
+}
+.keycell {
+ padding: 0 5px 0 5px;
+}
+.modOff {
+ color: #ffd0d0;
+}
+.modOn {
+ color: green;
+}
+.undef {
+ color: #a0a0a0;
+}
+#output tr:hover, tr.highlight {
+ background-color: #e0e0e0;
+}
+body {
+ margin: 10px;
+ padding: 0 20px;
+}
+</style>
+
+<script language="javascript">
+
+var MAX_OUTPUT_ROWS = 100;
+var NUM_HEADER_ROWS = 2;
+
+function clearChildren(e) {
+ while (e.firstChild !== null) {
+ e.removeChild(e.firstChild);
+ }
+}
+
+function setText(e, text) {
+ clearChildren(e);
+ e.appendChild(document.createTextNode(text));
+}
+
+function setUserAgent() {
+ var userAgent = navigator.userAgent;
+ uaDiv = document.getElementById("useragent");
+ setText(uaDiv, userAgent);
+}
+
+function isOldIE() {
+ var ieIndex = navigator.userAgent.indexOf("MSIE");
+ if (ieIndex == -1) {
+ return false;
+ }
+ var ver = parseFloat(navigator.userAgent.substring(ieIndex+5));
+ return ver < 10.0;
+}
+
+function addEventListener(obj, etype, handler) {
+ if (obj.addEventListener) {
+ obj.addEventListener(etype, handler, false);
+ } else if (obj.attachEvent) {
+ obj.attachEvent("on"+etype, handler);
+ } else {
+ obj["on"+etype] = handler;
+ }
+}
+
+function init() {
+ setUserAgent();
+ resetTable();
+
+ var input = document.getElementById("input");
+ addEventListener(input, "keydown", onKeyDown);
+ addEventListener(input, "keypress", onKeyPress);
+ addEventListener(input, "keyup", onKeyUp);
+ addEventListener(input, "textInput", onTextInput);
+ addEventListener(input, "textinput", onTextInput); // For IE9
+ addEventListener(input, "beforeInput", onBeforeInput);
+ addEventListener(input, "input", onInput);
+}
+
+function onKeyDown(e) {
+ handleKeyEvent("keydown", e);
+}
+
+function onKeyPress(e) {
+ handleKeyEvent("keypress", e);
+}
+
+function onKeyUp(e) {
+ handleKeyEvent("keyup", e);
+}
+
+function onTextInput(e) {
+ handleInputEvent("textinput", e);
+}
+
+function onBeforeInput(e) {
+ handleInputEvent("beforeinput", e);
+}
+
+function onInput(e) {
+ handleInputEvent("input", e);
+}
+
+function addOutputRow() {
+ var table = document.getElementById("output");
+
+ while (table.rows.length > MAX_OUTPUT_ROWS) {
+ table.deleteRow(-1);
+ }
+ return table.insertRow(NUM_HEADER_ROWS);
+}
+
+function handleInputEvent(etype, e) {
+ var show = document.getElementById("show_"+etype);
+ if (show.checked) {
+ addInputEvent(etype, e);
+ }
+ handleDefaultPropagation(etype, e);
+}
+
+function handleKeyEvent(etype, e) {
+ var show = document.getElementById("show_"+etype);
+ if (show.checked) {
+ addKeyEvent(etype, e);
+ }
+ handleDefaultPropagation(etype, e);
+}
+
+function handleDefaultPropagation(etype, e) {
+ var preventDefault = document.getElementById("pd_"+etype);
+ if (preventDefault.checked && e.preventDefault) {
+ e.preventDefault();
+ }
+ var stopPropagation = document.getElementById("sp_"+etype);
+ if (stopPropagation.checked && e.stopPropagation) {
+ e.stopPropagation();
+ }
+}
+
+function addInputEvent(etype, e) {
+ if (!e) {
+ e = window.event;
+ }
+
+ var row = addOutputRow();
+ addTableCell(row, e.type, "etype");
+ addTableCell(row, "", "legacy");
+ addTableCell(row, "", "legacy");
+ addTableCell(row, "", "legacy");
+ addTableCell(row, "", "modifiers");
+ addTableCell(row, "", "modifiers");
+ addTableCell(row, "", "modifiers");
+ addTableCell(row, "", "modifiers");
+ addTableCell(row, "", "olddom3");
+ addTableCell(row, "", "olddom3");
+ addTableCell(row, "", "dom3");
+ addTableCell(row, "", "dom3");
+ addTableCell(row, "", "dom3");
+ addTableCell(row, "", "dom3");
+ addTableCell(row, "", "uievents");
+ addTableCell(row, calcString(e.data), "textinputdata");
+
+ addInputCell(row);
+}
+
+function addKeyEvent(etype, e) {
+ if (!e) {
+ e = window.event;
+ }
+
+ var row = addOutputRow();
+ addTableCell(row, e.type, "etype");
+ addTableCell(row, calcKeyVal(e.charCode), "legacy");
+ addTableCell(row, calcKeyVal(e.keyCode), "legacy");
+ addTableCell(row, calcKeyVal(e.which), "legacy");
+ addTableCellModifierKey(row, e.shiftKey, "modifiers");
+ addTableCellModifierKey(row, e.ctrlKey, "modifiers");
+ addTableCellModifierKey(row, e.altKey, "modifiers");
+ addTableCellModifierKey(row, e.metaKey, "modifiers");
+ addTableCell(row, e.keyIdentifier, "olddom3");
+ addTableCell(row, calcLocation(e.keyLocation), "olddom3");
+ addTableCell(row, calcString(e.char), "dom3");
+ addTableCell(row, calcString(e.key), "dom3");
+ addTableCell(row, calcLocation(e.location), "dom3");
+ addTableCell(row, e.repeat, "dom3");
+ addTableCell(row, e.code, "uievents");
+ addTableCell(row, "", "textinputdata");
+
+ addInputCell(row);
+}
+
+function calcLocation(loc) {
+ if (loc == 1) return "LEFT";
+ if (loc == 2) return "RIGHT";
+ if (loc == 3) return "NUMPAD";
+ return loc;
+}
+
+function calcKeyVal(key) {
+ if (key === undefined) {
+ return key;
+ }
+ if (key >= 32 && key < 127) {
+ return key + " '" + String.fromCharCode(key) + "'";
+ }
+ return key;
+}
+
+function calcModifierKey(key) {
+ return key ? "✓" : "✗";
+}
+
+function calcString(data) {
+ if (data === undefined) {
+ return data;
+ }
+ return "'" + data + "'";
+}
+
+function addClass(obj, className) {
+ if (!isOldIE()) {
+ obj.classList.add(className);
+ }
+}
+
+function addInnerText(obj, text) {
+ if (!isOldIE()) {
+ obj.appendChild(document.createTextNode(text));
+ } else {
+ obj.innerText = text;
+ }
+}
+
+function resetTable() {
+ clearTable();
+ createTableHeader();
+}
+
+function clearTable() {
+ clearChildren(document.getElementById("output"));
+}
+
+function addInputCell(row) {
+ var value = document.getElementById("input").value;
+ addTableCell(row, "'" + value + "'", "inputbox", undefined, undefined, "left");
+}
+
+function addTableCell(row, data, celltype, style, span, align) {
+ var cell = row.insertCell(-1);
+ if (data === undefined) {
+ data = "?";
+ addClass(cell, "undef");
+ }
+ addInnerText(cell, data);
+ if (align === undefined) {
+ align = "center";
+ }
+ cell.setAttribute("align", align);
+ if (span !== undefined) {
+ cell.setAttribute("colspan", span);
+ }
+ addClass(cell, "keycell");
+ addClass(cell, celltype);
+ if (style !== undefined) {
+ if (style instanceof Array) {
+ for (var i = 0; i < style.length; i++) {
+ addClass(cell, style[i]);
+ }
+ } else {
+ addClass(cell, style);
+ }
+ }
+ if (celltype == "etype" || celltype == "empty") {
+ return;
+ }
+ // Hide this cell if it belongs to a hidden celltype.
+ var show = document.getElementById("show_" + celltype).checked;
+ if (!show) {
+ cell.style.display = "none";
+ }
+}
+
+function addTableCellModifierKey(row, key, celltype) {
+ var modstyle = key ? "modOn" : "modOff";
+ addTableCell(row, calcModifierKey(key), celltype, modstyle);
+}
+
+function createTableHeader() {
+ var table = document.getElementById("output");
+ var head = table.createTHead();
+ var row1 = head.insertRow(-1);
+ var row2 = head.insertRow(-1);
+ addTableCell(row1, "", "empty");
+ addTableCell(row2, "Event type", "etype", "etype_header");
+
+ addTableCell(row1, "Legacy", "legacy", "legacy_header", 3);
+ addTableCell(row2, "charCode", "legacy", "legacy_header");
+ addTableCell(row2, "keyCode", "legacy", "legacy_header");
+ addTableCell(row2, "which", "legacy", "legacy_header");
+
+ addTableCell(row1, "Modifiers", "modifiers", "modifiers_header", 4);
+ addTableCell(row2, "shift", "modifiers", "modifiers_header");
+ addTableCell(row2, "ctrl", "modifiers", "modifiers_header");
+ addTableCell(row2, "alt", "modifiers", "modifiers_header");
+ addTableCell(row2, "meta", "modifiers", "modifiers_header");
+
+ addTableCell(row1, "Old DOM3", "olddom3", "olddom3_header", 2);
+ addTableCell(row2, "keyIdentifier", "olddom3", "olddom3_header");
+ addTableCell(row2, "keyLocation", "olddom3", "olddom3_header");
+
+ addTableCell(row1, "DOM3", "dom3", "dom3_header", 4);
+ addTableCell(row2, "char", "dom3", "dom3_header");
+ addTableCell(row2, "key", "dom3", "dom3_header");
+ addTableCell(row2, "location", "dom3", "dom3_header");
+ addTableCell(row2, "repeat", "dom3", "dom3_header");
+
+ addTableCell(row1, "UI Events", "uievents", "uievents_header", 1);
+ addTableCell(row2, "code", "uievents", "uievents_header");
+
+ addTableCell(row1, "Text Input", "textinputdata", "textinputdata_header", 1);
+ addTableCell(row2, "data", "textinputdata", "textinputdata_header");
+
+ addTableCell(row1, "", "inputbox", "empty");
+ addTableCell(row2, "Input field", "inputbox", "inputbox_header");
+}
+
+function toggleOptions() {
+ var link = document.getElementById("optionstoggle");
+ var options = document.getElementById("options");
+ clearChildren(link);
+ if (options.style.display == "block") {
+ options.style.display = "none";
+ addInnerText(link, "Show Options");
+ }
+ else {
+ options.style.display = "block";
+ addInnerText(link, "Hide Options");
+ }
+}
+
+function showFieldClick(cb) {
+ if (isOldIE()) {
+ return;
+ }
+ var celltype = cb.id.split('_')[1];
+ var show = cb.checked;
+
+ var table = document.getElementById("output");
+ for (var ir = 0, row; row = table.rows[ir]; ir++) {
+ for (var ic = 0, cell; cell = row.cells[ic]; ic++) {
+ if (cell.classList.contains(celltype)) {
+ if (show) {
+ cell.style.display = "";
+ } else {
+ cell.style.display = "none";
+ }
+ }
+ }
+ }
+
+}
+
+</script>
+</head>
+
+<body>
+
+<h1>Keyboard Events</h1><p>
+
+<p>UserAgent: <span id="useragent"></span>
+</p>
+
+<p>Input: <input id="input" type="text" size="80" autofocus />
+<input type="button" onclick="resetTable();return false" value="Clear Table"/>
+<a id="optionstoggle" href="javascript:toggleOptions()">Show Options</a>
+</p>
+
+<div id="options">
+<table class="opttable"><tr>
+<td class="optcell">
+<span class="opttitle">preventDefault</span><br/>
+<input type="checkbox" id="pd_keydown" /> keydown<br/>
+<input type="checkbox" id="pd_keypress" /> keypress<br/>
+<input type="checkbox" id="pd_keyup" /> keyup<br/>
+<input type="checkbox" id="pd_textinput" /> textinput<br/>
+<input type="checkbox" id="pd_beforeinput" /> beforeinput<br/>
+<input type="checkbox" id="pd_input" /> input<br/>
+</td><td class="optcell">
+<span class="opttitle">stopPropagation</span><br/>
+<input type="checkbox" id="sp_keydown" checked /> keydown<br/>
+<input type="checkbox" id="sp_keypress" checked /> keypress<br/>
+<input type="checkbox" id="sp_keyup" checked /> keyup<br/>
+<input type="checkbox" id="sp_textinput" checked /> textinput<br/>
+<input type="checkbox" id="sp_beforeinput" checked /> beforeinput<br/>
+<input type="checkbox" id="sp_input" checked /> input<br/>
+</td><td class="optcell">
+<span class="opttitle">Show Events</span><br/>
+<input type="checkbox" id="show_keydown" checked /> keydown<br/>
+<input type="checkbox" id="show_keypress" checked /> keypress<br/>
+<input type="checkbox" id="show_keyup" checked /> keyup<br/>
+<input type="checkbox" id="show_textinput" checked /> textinput<br/>
+<input type="checkbox" id="show_beforeinput" /> beforeinput<br/>
+<input type="checkbox" id="show_input" /> input<br/>
+</td><td class="optcell">
+<span class="opttitle">Show Fields</span><br/>
+<input type="checkbox" onclick="showFieldClick(this)" id="show_legacy" checked /> Legacy<br/>
+<input type="checkbox" onclick="showFieldClick(this)" id="show_modifiers" checked /> Modifiers<br/>
+<input type="checkbox" onclick="showFieldClick(this)" id="show_olddom3" checked /> Old DOM3<br/>
+<input type="checkbox" onclick="showFieldClick(this)" id="show_dom3" checked /> DOM3<br/>
+<input type="checkbox" onclick="showFieldClick(this)" id="show_uievents" checked /> UI Events<br/>
+<input type="checkbox" onclick="showFieldClick(this)" id="show_textinputdata" checked /> TextInput<br/>
+<input type="checkbox" onclick="showFieldClick(this)" id="show_inputbox" checked /> Input<br/>
+</td>
+</tr></table>
+</div>
+
+<table id="output">
+</table>
+
+<script language="javascript">
+init();
+</script>
+
+</body>
+</html>