--- a/key-event-test.html Sat Jul 27 08:49:29 2013 -0700
+++ b/key-event-test.html Mon Aug 12 17:25:56 2013 -0700
@@ -57,11 +57,6 @@
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;
@@ -148,6 +143,9 @@
addEventListener(input, "textinput", onTextInput); // For IE9
addEventListener(input, "beforeInput", onBeforeInput);
addEventListener(input, "input", onInput);
+ addEventListener(input, "compositionstart", onCompositionStart);
+ addEventListener(input, "compositionupdate", onCompositionUpdate);
+ addEventListener(input, "compositionend", onCompositionEnd);
}
function onKeyDown(e) {
@@ -174,6 +172,18 @@
handleInputEvent("input", e);
}
+function onCompositionStart(e) {
+ handleCompositionEvent("compositionstart", e);
+}
+
+function onCompositionUpdate(e) {
+ handleCompositionEvent("compositionupdate", e);
+}
+
+function onCompositionEnd(e) {
+ handleCompositionEvent("compositionend", e);
+}
+
function addOutputRow() {
var table = document.getElementById("output");
@@ -199,6 +209,14 @@
handleDefaultPropagation(etype, e);
}
+function handleCompositionEvent(etype, e) {
+ var show = document.getElementById("show_"+etype);
+ if (show.checked) {
+ addCompositionEvent(etype, e);
+ }
+ handleDefaultPropagation(etype, e);
+}
+
function handleDefaultPropagation(etype, e) {
var preventDefault = document.getElementById("pd_"+etype);
if (preventDefault.checked && e.preventDefault) {
@@ -215,25 +233,10 @@
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);
+ var eventinfo = {};
+ eventinfo["etype"] = e.type;
+ eventinfo["data"] = calcString(e.data);
+ addEvent(eventinfo);
}
function addKeyEvent(etype, e) {
@@ -241,23 +244,61 @@
e = window.event;
}
+ var eventinfo = {};
+ eventinfo["etype"] = e.type;
+ eventinfo["charCode"] = calcKeyVal(e.charCode);
+ eventinfo["keyCode"] = calcKeyVal(e.keyCode);
+ eventinfo["which"] = calcKeyVal(e.which);
+ eventinfo["shift"] = e.shiftKey;
+ eventinfo["ctrl"] = e.ctrlKey;
+ eventinfo["alt"] = e.altKey;
+ eventinfo["meta"] = e.metaKey;
+ eventinfo["keyIdentifier"] = e.keyIdentifier;
+ eventinfo["keyLocation"] = calcLocation(e.keyLocation);
+ eventinfo["char"] = calcString(e.char);
+ eventinfo["key"] = calcString(e.key);
+ eventinfo["location"] = calcLocation(e.location);
+ eventinfo["repeat"] = e.repeat;
+ eventinfo["code"] = e.code;
+ addEvent(eventinfo);
+}
+
+function addCompositionEvent(etype, e) {
+ if (!e) {
+ e = window.event;
+ }
+
+ var eventinfo = {};
+ eventinfo["etype"] = e.type;
+ eventinfo["data"] = calcString(e.data);
+ addEvent(eventinfo);
+}
+
+function addEvent(eventinfo) {
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");
+
+ addTableCell(row, eventinfo["etype"], "etype");
+
+ addTableCell(row, eventinfo["charCode"], "legacy");
+ addTableCell(row, eventinfo["keyCode"], "legacy");
+ addTableCell(row, eventinfo["which"], "legacy");
+
+ addTableCellModifierKey(row, eventinfo["shift"], "modifiers");
+ addTableCellModifierKey(row, eventinfo["ctrl"], "modifiers");
+ addTableCellModifierKey(row, eventinfo["alt"], "modifiers");
+ addTableCellModifierKey(row, eventinfo["meta"], "modifiers");
+
+ addTableCell(row, eventinfo["keyIdentifier"], "olddom3");
+ addTableCell(row, eventinfo["keyLocation"], "olddom3");
+
+ addTableCell(row, eventinfo["char"], "dom3");
+ addTableCell(row, eventinfo["key"], "dom3");
+ addTableCell(row, eventinfo["location"], "dom3");
+ addTableCell(row, eventinfo["repeat"], "dom3");
+ addTableCell(row, eventinfo["locale"], "dom3");
+ addTableCell(row, eventinfo["data"], "dom3");
+
+ addTableCell(row, eventinfo["code"], "uievents");
addInputCell(row);
}
@@ -321,7 +362,7 @@
function addTableCell(row, data, celltype, style, span, align) {
var cell = row.insertCell(-1);
if (data === undefined) {
- data = "?";
+ data = "-";
addClass(cell, "undef");
}
addInnerText(cell, data);
@@ -363,36 +404,41 @@
var head = table.createTHead();
var row1 = head.insertRow(-1);
var row2 = head.insertRow(-1);
+
addTableCell(row1, "", "empty");
addTableCell(row2, "Event type", "etype", "etype_header");
+ // KeyboardEvent - Legacy
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");
+ // KeyboardEvent - Modifiers
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");
+ // KeyboardEvent - Old DOM3
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);
+ // KeyboardEvent - DOM3
+ addTableCell(row1, "DOM3", "dom3", "dom3_header", 6);
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(row2, "locale", "dom3", "dom3_header");
+ addTableCell(row2, "data", "dom3", "dom3_header");
+ // KeyboardEvent - UI Events
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");
}
@@ -430,7 +476,6 @@
}
}
}
-
}
</script>
@@ -459,6 +504,9 @@
<label><input type="checkbox" id="pd_textinput" /> textinput</label><br/>
<label><input type="checkbox" id="pd_beforeinput" /> beforeinput</label><br/>
<label><input type="checkbox" id="pd_input" /> input</label><br/>
+ <label><input type="checkbox" id="pd_compositionstart" /> compositionstart</label><br/>
+ <label><input type="checkbox" id="pd_compositionupdate" /> compositionupdate</label><br/>
+ <label><input type="checkbox" id="pd_compositionend" /> compositionend</label><br/>
</td><td class="optcell">
<span class="opttitle">stopPropagation</span><br/>
<label><input type="checkbox" id="sp_keydown" checked /> keydown</label><br/>
@@ -467,6 +515,9 @@
<label><input type="checkbox" id="sp_textinput" checked /> textinput</label><br/>
<label><input type="checkbox" id="sp_beforeinput" checked /> beforeinput</label><br/>
<label><input type="checkbox" id="sp_input" checked /> input</label><br/>
+ <label><input type="checkbox" id="sp_compositionstart" checked /> compositionstart</label><br/>
+ <label><input type="checkbox" id="sp_compositionupdate" checked /> compositionupdate</label><br/>
+ <label><input type="checkbox" id="sp_compositionend" checked /> compositionend</label><br/>
</td><td class="optcell">
<span class="opttitle">Show Events</span><br/>
<label><input type="checkbox" id="show_keydown" checked /> keydown</label><br/>
@@ -475,16 +526,19 @@
<label><input type="checkbox" id="show_textinput" checked /> textinput</label><br/>
<label><input type="checkbox" id="show_beforeinput" /> beforeinput</label><br/>
<label><input type="checkbox" id="show_input" /> input</label><br/>
+ <label><input type="checkbox" id="show_compositionstart" /> compositionstart</label><br/>
+ <label><input type="checkbox" id="show_compositionupdate" /> compositionupdate</label><br/>
+ <label><input type="checkbox" id="show_compositionend" /> compositionend</label><br/>
<i>Applies only to<br/>new events</i>
</td><td class="optcell">
<span class="opttitle">Show Fields</span><br/>
- <label><input type="checkbox" onclick="showFieldClick(this)" id="show_legacy"checked />
+ <label><input type="checkbox" onclick="showFieldClick(this)" id="show_legacy" checked />
<span class="legacy_header showfieldoption">Legacy</span>
</label><br/>
<label><input type="checkbox" onclick="showFieldClick(this)" id="show_modifiers" checked />
<span class="modifiers_header showfieldoption">Modifiers</span>
</label><br/>
- <label><input type="checkbox" onclick="showFieldClick(this)" id="show_olddom3" checked />
+ <label><input type="checkbox" onclick="showFieldClick(this)" id="show_olddom3" />
<span class="olddom3_header showfieldoption">Old DOM3</span>
</label><br/>
<label><input type="checkbox" onclick="showFieldClick(this)" id="show_dom3" checked />
@@ -493,9 +547,6 @@
<label><input type="checkbox" onclick="showFieldClick(this)" id="show_uievents" checked />
<span class="uievents_header showfieldoption">UI Events</span>
</label><br/>
- <label><input type="checkbox" onclick="showFieldClick(this)" id="show_textinputdata" checked />
- <span class="textinputdata_header showfieldoption">Text Input</span>
- </label><br/>
<label><input type="checkbox" onclick="showFieldClick(this)" id="show_inputbox" checked />
<span class="inputbox_header showfieldoption">Input</span>
</label><br/>