Minor updates to keyboard event test page:
authorGary Kacmarcik <garykac@google.com>
Sat, 27 Apr 2013 07:29:35 -0700
changeset 31 3f8cb8287c2c
parent 30 b06369971c27
child 32 9bc96e61caf6
Minor updates to keyboard event test page:
* Add click-on-label support for checkbox
* Add color code the 'show field' options
* Add note that new events are inserted at top of table
* Add note that 'show events' only applies to new events
key-event-test.html
--- 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>