Cleanup composiiton event sequence examples.
Fix bugs: 18850 and 18851
Convert list to table. Add formatting and label columns.
--- a/html/DOM3-Events.html Tue Aug 13 13:44:39 2013 -0700
+++ b/html/DOM3-Events.html Fri Aug 16 19:11:11 2013 -0700
@@ -5983,15 +5983,40 @@
<div class="example">
<div class="example-title">Example</div>
- <ol>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Shift'</code>, <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">
- shiftKey</a></code></li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Q'</code> (<code class="char">'\u0051'</code>, Latin Capital Letter
- Q key), <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Q'</code> (<code class="char">'\u0051'</code>, Latin Capital Letter Q
- key), <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Shift'</code></li>
- </ol>
+ <table class="event-sequence-table">
+ <tr>
+ <td class="cell-right">1.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Shift'</code></td>
+ <td></td>
+ <td><code class="attribute-name">shiftKey</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">2.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Q'</code></td>
+ <td><code class="char">'\u0051'</code></td>
+ <td><code class="attribute-name">shiftKey</code></td>
+ <td>Latin Capital Letter Q</td>
+ </tr>
+ <tr>
+ <td class="cell-right">3.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Q'</code></td>
+ <td><code class="char">'\u0051'</code></td>
+ <td><code class="attribute-name">shiftKey</code></td>
+ <td>Latin Capital Letter Q</td>
+ </tr>
+ <tr>
+ <td class="cell-right">4.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Shift'</code></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </table>
</div>
<p>The following example describes an alternate sequence of keys to the example above, where the <code class="key">'Shift'</code> key is released before the <code
@@ -6000,28 +6025,80 @@
<div class="example">
<div class="example-title">Example</div>
- <ol>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Shift'</code>, <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">
- shiftKey</a></code></li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Q'</code> (<code class="char">'\u0051'</code>, Latin Capital Letter
- Q key), <code class="attribute-name"><a href="#events-MouseEvent-shiftKey">shiftKey</a></code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Shift'</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'q'</code> (<code class="char">'\u0071'</code>, Latin Small Letter Q key)</li>
- </ol>
+ <table class="event-sequence-table">
+ <tr>
+ <td class="cell-right">1.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Shift'</code></td>
+ <td></td>
+ <td><code class="attribute-name">shiftKey</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">2.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Q'</code></td>
+ <td><code class="char">'\u0051'</code></td>
+ <td><code class="attribute-name">shiftKey</code></td>
+ <td>Latin Capital Letter Q</td>
+ </tr>
+ <tr>
+ <td class="cell-right">3.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Shift'</code></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">4.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'q'</code></td>
+ <td><code class="char">'\u0071'</code></td>
+ <td></td>
+ <td>Latin Small Letter Q</td>
+ </tr>
+ </table>
</div>
<p>The following example describes a possible sequence of keys that does not generate a Unicode character (using the same configuration):</p>
<div class="example">
<div class="example-title">Example</div>
- <ol>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Control'</code>, ctrlKey</li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'v'</code> (<code class="char">'\u0076'</code>, Latin Small Letter
- V key), ctrlKey</li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'v'</code> (<code class="char">'\u0076'</code>, Latin Small Letter V
- key), ctrlKey</li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Control'</code></li>
- </ol>
+ <table class="event-sequence-table">
+ <tr>
+ <td class="cell-right">1.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Control'</code></td>
+ <td></td>
+ <td><code class="attribute-name">ctrlKey</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">2.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'v'</code></td>
+ <td><code class="char">'\u0076'</code></td>
+ <td><code class="attribute-name">ctrlKey</code></td>
+ <td>Latin Small Letter V</td>
+ </tr>
+ <tr>
+ <td class="cell-right">3.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'v'</code></td>
+ <td><code class="char">'\u0076'</code></td>
+ <td><code class="attribute-name">ctrlKey</code></td>
+ <td>Latin Small Letter V</td>
+ </tr>
+ <tr>
+ <td class="cell-right">4.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Control'</code></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </table>
</div>
<p>In some cases, modifier keys change the key value value for a key event. For example, on some MacOS keyboards, the key labeled <code>'delete'</code>
@@ -6049,16 +6126,80 @@
<div class="example">
<div class="example-title">Example</div>
- <ol>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
- <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="key">''</code></li>
- <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'ê'</code> (<code class="char">'\u00EA'</code>, LATIN SMALL LETTER
- E WITH CIRCUMFLEX)</li>
- <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="key">'ê'</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'e'</code> (<code class="char">'\u0065'</code>, Latin Small Letter E key)</li>
- </ol>
+ <table class="event-sequence-table">
+ <tr>
+ <td class="cell-right"></td>
+ <th>Event Name</th>
+ <th class="cell-center">KeyboardEvent<br/><code>key</code></th>
+ <th class="cell-center">CompositionEvent<br/><code>data</code></th>
+ <th>Unicode</th>
+ <th>Notes</th>
+ </tr>
+ <tr>
+ <td class="cell-right">1.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'^'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0302'</code></td>
+ <td>Combining Circumflex Accent</td>
+ </tr>
+ <tr>
+ <td class="cell-right">2.</td>
+ <td><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">''</code></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">3.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'^'</code></td>
+ <td><code class="char">'\u0302'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">4.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'^'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0302'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">5.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'ê'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u00EA'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">6.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'ê'</code></td>
+ <td><code class="char">'\u00EA'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">7.</td>
+ <td><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'ê'</code></td>
+ <td><code class="char">'\u00EA'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">8.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'e'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0065'</code></td>
+ <td>Latin Small Letter E</td>
+ </tr>
+ </table>
</div>
<p class="note"><strong>Note:</strong> In step 5 above, the key value will <em>not</em> be <code class="key">'e'</code> (Latin Small Letter E key) under normal circumstances
@@ -6069,17 +6210,80 @@
<div class="example">
<div class="example-title">Example</div>
- <ol>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
- <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="key">''</code></li>
- <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="char">'\u0302'</code> (Combining Circumflex Accent key)</li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'q'</code> (<code class="char">'\u0071'</code>, The Latin Small Letter
- Q key)</li>
- <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="key">''</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'q'</code> (<code class="char">'\u0071'</code>, The Latin Small Letter
- Q key)</li>
- </ol>
+ <table class="event-sequence-table">
+ <tr>
+ <td class="cell-right"></td>
+ <th>Event Name</th>
+ <th class="cell-center">KeyboardEvent<br/><code>key</code></th>
+ <th class="cell-center">CompositionEvent<br/><code>data</code></th>
+ <th>Unicode</th>
+ <th>Notes</th>
+ </tr>
+ <tr>
+ <td class="cell-right">1.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'^'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0302'</code></td>
+ <td>Combining Circumflex Accent</td>
+ </tr>
+ <tr>
+ <td class="cell-right">2.</td>
+ <td><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">''</code></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">3.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'^'</code></td>
+ <td><code class="char">'\u0302'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">4.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'^'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0302'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">5.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'q'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0071'</code></td>
+ <td>Latin Small Letter Q</td>
+ </tr>
+ <tr>
+ <td class="cell-right">6.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">''</code></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">7.</td>
+ <td><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">''</code></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">8.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'q'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0071'</code></td>
+ <td>Latin Small Letter Q</td>
+ </tr>
+ </table>
</div>
</section>
@@ -6106,30 +6310,148 @@
<code class="char">'\u0020'</code> (Space key) and <code class="key">'Enter'</code>.</p>
<p class="note"><strong>Note:</strong> <code class="glyph">'詩'</code> (<q>poem</q>) and <code class="glyph">'市'</code> (<q>city</q>) are homophones, both
- pronounced <q>shi</q>, so the user would use the <code class="key">'Convert'</code> key to select the proper option.</p>
+ pronounced し (<q>shi</q>), so the user would use the <code class="key">'Convert'</code> key to select the proper option.</p>
<div class="example">
<div class="example-title">Example</div>
- <ol>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'s'</code> (<code class="char">'\u0073'</code>, Latin Small Letter
- S key)</li>
- <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="key">''</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'s'</code> (<code class="char">'\u0073'</code>, Latin Small Letter
- S key)</li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'i'</code> (<code class="char">'\u0069'</code>, Latin Small Letter
- I key)</li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'i'</code> (<code class="char">'\u0069'</code>, Latin Small Letter
- I key)</li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Convert'</code></li>
- <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="key">'詩'</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Convert'</code></li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Convert'</code></li>
- <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="key">'市'</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Convert'</code></li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Accept'</code></li>
- <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="key">'市'</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Accept'</code></li>
- </ol>
+ <table class="event-sequence-table">
+ <tr>
+ <td class="cell-right"></td>
+ <th>Event Name</th>
+ <th class="cell-center">KeyboardEvent<br/><code>key</code></th>
+ <th class="cell-center">CompositionEvent<br/><code>data</code></th>
+ <th>Unicode</th>
+ <th>Notes</th>
+ </tr>
+ <tr>
+ <td class="cell-right">1.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'s'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0073'</code></td>
+ <td>Latin Small Letter S</td>
+ </tr>
+ <tr>
+ <td class="cell-right">2.</td>
+ <td><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">''</code></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">3.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'s'</code></td>
+ <td><code class="char">'\u0073'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">4.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'s'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0073'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">5.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'i'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0069'</code></td>
+ <td>Latin Small Letter I</td>
+ </tr>
+ <tr>
+ <td class="cell-right">6.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'し'</code></td>
+ <td><code class="char">'\u3057'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">7.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'i'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0069'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">8.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Convert'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td>Convert</td>
+ </tr>
+ <tr>
+ <td class="cell-right">9.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'詩'</code></td>
+ <td><code class="char">'\u8a69'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">10.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Convert'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">11.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Convert'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td>Convert</td>
+ </tr>
+ <tr>
+ <td class="cell-right">12.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'市'</code></td>
+ <td><code class="char">'\u5e02'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">13.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Convert'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">14.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Accept'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td>Accept</td>
+ </tr>
+ <tr>
+ <td class="cell-right">15.</td>
+ <td><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'市'</code></td>
+ <td><code class="char">'\u5e02'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">16.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Accept'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </table>
</div>
<p>IME composition can also be canceled as in the following example, with conditions identical to the previous example. The key <a href="#key-Cancel"><code class="key">
@@ -6138,27 +6460,152 @@
<div class="example">
<div class="example-title">Example</div>
- <ol>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'s'</code> (<code class="char">'\u0073'</code>, Latin Small Letter
- S key)</li>
- <li><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a>: <code class="key">''</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'s'</code> (<code class="char">'\u0073'</code>, Latin Small Letter
- S key)</li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'i'</code> (<code class="char">'\u0069'</code>, Latin Small Letter
- I key)</li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'i'</code> (<code class="char">'\u0069'</code>, Latin Small Letter
- I key)</li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Convert'</code></li>
- <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="key">'詩'</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Convert'</code></li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Convert'</code></li>
- <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="key">'市'</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Convert'</code></li>
- <li><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a>: <code class="key">'Cancel'</code></li>
- <li><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a>: <code class="key">''</code></li>
- <li><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a>: <code class="key">''</code></li>
- <li><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a>: <code class="key">'Cancel'</code></li>
- </ol>
+ <table class="event-sequence-table">
+ <tr>
+ <td class="cell-right"></td>
+ <th>Event Name</th>
+ <th class="cell-center">KeyboardEvent<br/><code>key</code></th>
+ <th class="cell-center">CompositionEvent<br/><code>data</code></th>
+ <th>Unicode</th>
+ <th>Notes</th>
+ </tr>
+ <tr>
+ <td class="cell-right">1.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'s'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0073'</code></td>
+ <td>Latin Small Letter S</td>
+ </tr>
+ <tr>
+ <td class="cell-right">2.</td>
+ <td><a class="eventtype" href="#event-type-compositionstart"><code>compositionstart</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">''</code></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">3.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'s'</code></td>
+ <td><code class="char">'\u0073'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">4.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'s'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0073'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">5.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'i'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0069'</code></td>
+ <td>Latin Small Letter I</td>
+ </tr>
+ <tr>
+ <td class="cell-right">6.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'し'</code></td>
+ <td><code class="char">'\u3057'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">7.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'i'</code></td>
+ <td class="cell-center"></td>
+ <td><code class="char">'\u0069'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">8.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Convert'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td>Convert</td>
+ </tr>
+ <tr>
+ <td class="cell-right">9.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'詩'</code></td>
+ <td><code class="char">'\u8a69'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">10.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Convert'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">11.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Convert'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td>Convert</td>
+ </tr>
+ <tr>
+ <td class="cell-right">12.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">'市'</code></td>
+ <td><code class="char">'\u5e02'</code></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">13.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Convert'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">14.</td>
+ <td><a class="eventtype" href="#event-type-keydown"><code>keydown</code></a></td>
+ <td class="cell-center"><code class="key">'Cancel'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td>Cancel</td>
+ </tr>
+ <tr>
+ <td class="cell-right">15.</td>
+ <td><a class="eventtype" href="#event-type-compositionupdate"><code>compositionupdate</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">''</code></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">16.</td>
+ <td><a class="eventtype" href="#event-type-compositionend"><code>compositionend</code></a></td>
+ <td class="cell-center"></td>
+ <td class="cell-center"><code class="key">''</code></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="cell-right">17.</td>
+ <td><a class="eventtype" href="#event-type-keyup"><code>keyup</code></a></td>
+ <td class="cell-center"><code class="key">'Cancel'</code></td>
+ <td class="cell-center"></td>
+ <td></td>
+ <td></td>
+ </tr>
+ </table>
</div>
<p class="note"><strong>Note:</strong> Some <a class="def" href="#glossary-ime">input method editors</a> (such as on the MacOS operating system) might set an <a class="def" href="#glossary-empty-string">
--- a/html/override.css Tue Aug 13 13:44:39 2013 -0700
+++ b/html/override.css Fri Aug 16 19:11:11 2013 -0700
@@ -66,7 +66,7 @@
margin: -0.5em 0 0 0;
}
-div.example > ol,ul,pre {
+div.example > ol,ul,pre,table {
margin: 0;
}
@@ -148,3 +148,31 @@
.key-table-key {
vertical-align: top;
}
+
+/* Formatting for the event sequence tables.
+ */
+.event-sequence-table th {
+ background:none repeat scroll 0 0 #E8EDFF;
+ color:#003399;
+ font-weight:normal;
+ padding: 0.25em 0.5em 0.25em 0.5em;
+}
+
+.event-sequence-table td {
+ background:none repeat scroll 0 0 #ffffff;
+ color:#666699;
+ padding: 0 0.5em 0 0.5em;
+}
+
+.event-sequence-table tr:hover td {
+ background:none repeat scroll 0 0 #E8EDFF;
+ color:#333399;
+}
+
+.cell-center {
+ text-align: center;
+}
+
+.cell-right {
+ text-align: right;
+}