--- a/key-event-test.html Thu Apr 25 13:32:34 2013 -0700
+++ b/key-event-test.html Sat Apr 27 07:29:35 2013 -0700
@@ -79,6 +79,13 @@
.undef {
color: #a0a0a0;
}
+.showfieldoption {
+ font-weight: normal;
+ padding: 0 5px 0 5px;
+ display: inline-block;
+ min-width: 90px;
+ text-align: center;
+}
#output tr:hover, tr.highlight {
background-color: #e0e0e0;
}
@@ -439,43 +446,59 @@
<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>
+<i>-- Note: Read event table from bottom to top.</i>
</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/>
+ <span class="opttitle">preventDefault</span><br/>
+ <label><input type="checkbox" id="pd_keydown" /> keydown</label><br/>
+ <label><input type="checkbox" id="pd_keypress" /> keypress</label><br/>
+ <label><input type="checkbox" id="pd_keyup" /> keyup</label><br/>
+ <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/>
</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/>
+ <span class="opttitle">stopPropagation</span><br/>
+ <label><input type="checkbox" id="sp_keydown" checked /> keydown</label><br/>
+ <label><input type="checkbox" id="sp_keypress" checked /> keypress</label><br/>
+ <label><input type="checkbox" id="sp_keyup" checked /> keyup</label><br/>
+ <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/>
</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/>
+ <span class="opttitle">Show Events</span><br/>
+ <label><input type="checkbox" id="show_keydown" checked /> keydown</label><br/>
+ <label><input type="checkbox" id="show_keypress" checked /> keypress</label><br/>
+ <label><input type="checkbox" id="show_keyup" checked /> keyup</label><br/>
+ <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/>
+ <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 />
+ <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 />
+ <span class="olddom3_header showfieldoption">Old DOM3</span>
+ </label><br/>
+ <label><input type="checkbox" onclick="showFieldClick(this)" id="show_dom3" checked />
+ <span class="dom3_header showfieldoption">DOM3</span>
+ </label><br/>
+ <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/>
</td>
</tr></table>
</div>