--- a/source_respec.htm Fri Feb 22 17:53:33 2013 -0800
+++ b/source_respec.htm Sun Feb 24 08:22:35 2013 -0800
@@ -88,8 +88,9 @@
initializing untrusted event objects more easily.
</p>
- <p class="note"><strong>Example: </strong>Synthesizing an untrusted event <b>using legacy initialization
- methods:</b><tt style="white-space: pre">
+ <pre class="example">
+ <p class="example-title">Synthesizing an untrusted event <em>using legacy initialization methods</em>:
+ </p>
var event = document.createEvent("MouseEvent");
event.initMouseEvent("mouseover",
true,
@@ -105,16 +106,19 @@
null,
null,
previousEventTarget);
-eventTarget.dispatchEvent(event); </tt></p>
+eventTarget.dispatchEvent(event);
+ </pre><!-- Synthesizing events - legacy -->
- <p class="note"><strong>Example: </strong>Synthesizing an untrusted event <b>using constructors</b>:<tt style="white-space: pre">
+ <pre class="example">
+ <p class="example-title">Synthesizing an untrusted event <em>using constructors</em>:
+ </p>
var event = new MouseEvent("mouseover",
{bubbles: true,
cancelable: true,
relatedTarget: previousEventTarget
});
-eventTarget.dispatchEvent(event);</tt>
- </p>
+eventTarget.dispatchEvent(event);
+ </pre><!-- Synthesizing events - constructors -->
<p>In the above example, the author only has to set the event object properties
that he or she wants. Using legacy initialization methods, such as
@@ -167,8 +171,10 @@
</dl>
<dl class="idl" title="dictionary MouseEventInit : UIEventInit">
+
<dt>long screenX = 0</dt>
<dd>See <code>screenY</code> (substituting "horizontal" for "veritcal")</dd>
+
<dt>long screenY = 0</dt>
<dd>Initializes the <code>screenY</code> attribute of the MouseEvent
object to the desired vertical relative position of the mouse
@@ -178,8 +184,10 @@
not move the user's mouse pointer to the initialized position.
</p>
</dd>
+
<dt>long clientX = 0</dt>
<dd>See <code>clientY</code> (substituting "horizontal" for "vertical")</dd>
+
<dt>long clientY = 0</dt>
<dd>Initializes the <code>clientY</code> attribute of the MouseEvent
object to the desired vertical position of the mouse pointer
@@ -195,26 +203,31 @@
pageX, pageY, x, and y.
</p>
</dd>
+
<dt>boolean ctrlKey = false</dt>
<dd>Initializes the <code>ctrlKey</code> attribute of the MouseEvent
object to <code>true</code> if the <code>ctrlKey</code> modifier
key is to be considered depressed, <code>false</code> otherwise.
</dd>
+
<dt>boolean shiftKey = false</dt>
<dd>Initializes the <code>shiftKey</code> attribute of the MouseEvent
object to <code>true</code> if the <code>shiftKey</code> modifier
key is to be considered depressed, <code>false</code> otherwise.
</dd>
+
<dt>boolean altKey = false</dt>
<dd>Initializes the <code>altKey</code> attribute of the MouseEvent
object to <code>true</code> if the <code>altKey</code> modifier
key is to be considered depressed, <code>false</code> otherwise.
</dd>
+
<dt>boolean metaKey = false</dt>
<dd>Initializes the <code>metaKey</code> attribute of the MouseEvent
object to <code>true</code> if the <code>metaKey</code> modifier
key is to be considered depressed, <code>false</code> otherwise.
</dd>
+
<dt>unsigned short button = 0</dt>
<dd>
Initializes the <code>button</code> attribute of the MouseEvent
@@ -228,6 +241,7 @@
in DOM Level 3 Events [[DOM-LEVEL-3-EVENTS]].
</p>
</dd>
+
<dt>unsigned short buttons = 0</dt>
<dd>
Initializes the <code>buttons</code> attribute of the MouseEvent
@@ -245,15 +259,20 @@
16, etc.), but these additional values are not well-defined in DOM
Level 3 Events.
</p>
- <p class="note"><strong>Example:</strong> In JavaScript, to initialize the
- <code>buttons</code> attribute as if the right (2) and middle
- button (4) were being pressed simultaneously, the buttons value
- can be assigned as either:<br />
- <code>{ buttons: 2 | 4 }</code><br />
- or:<br />
+
+ <pre class="example">
+ <p class="example-text">
+ In JavaScript, to initialize the
+ <code>buttons</code> attribute as if the right (2) and middle
+ button (4) were being pressed simultaneously, the buttons value
+ can be assigned as either:<br/>
+ <code>{ buttons: 2 | 4 }</code></br/>
+ or:<br/>
<code>{ buttons: 6 }</code>
- </p>
+ </p>
+ </pre><!-- Initializing buttons -->
</dd>
+
<dt>EventTarget? relatedTarget = null</dt>
<dd>The <code>relatedTarget</code> should be initialized to the element
whose bounds the mouse pointer just left (in the case of a
@@ -367,7 +386,7 @@
</dd>
<dt>DOMString locale = ""</dt>
<dd>Initializes the <code>locale</code> attribute of the KeyboardEvent
- object to a BCP-47 string. This string should reflect the current language
+ object to a [[!BCP47]] string. This string should reflect the current language
that the keyboard originaing this event is configured to, for example <code>"en-US"</code>
for a keyboard configured for US English input. This value may be the
empty string if the locale of the given input is unknown.
@@ -388,7 +407,7 @@
</dd>
<dt>DOMString locale = ""</dt>
<dd>Initializes the <code>locale</code> attribute of the CompositionEvent
- object to a BCP-47 string. This string should reflect the current language
+ object to a [[!BCP47]] string. This string should reflect the current language
that the IME originaing this event is configured to, for example <code>"ja"</code>
for an IME configured for Japanese input. This value may be the
empty string if the locale of the IME is unknown.
@@ -402,8 +421,9 @@
<p>The DOM Level 3 Events specification defines keyboard events that include <code>char</code> and <code>key</code>
attributes to replace the legacy keyboard event attributes <code>keycode</code> and <code>charCode</code>.
</p>
- <p>This document extends the DOM Level 3 keyboard event by adding a <code>code</code> attribute that is
- intended to help identify the key being pressed on the keyboard.
+ <p>This document extends the DOM Level 3 keyboard event by adding a <code>code</code> attribute
+ (to help identify the key being pressed on the keyboard) and methods to identify the <code>char</code>
+ associated with a given key.
</p>
<section id="keyboard-event-interface">
@@ -424,22 +444,23 @@
<dd>
<p>Given a <code>code</code> corresponding to a key on a standard keyboard and a [[!BCP47]] <code>locale</code>,
the <code>queryKeyCap</code> method returns the character that would be generated if that key were
- pressed (without modifiers) while the specified <code>locale</code> is in effect.
+ pressed (without modifiers or any special modes in effect) while the specified keyboard <code>locale</code> is in effect.
Assuming that <code>locale</code> matches the user's physical keyboard, then this value will
match the value printed on the <em>keycap</em> (the cap placed over the key switch) on the keyboard.
</p>
<p>This method is intended to be used primarily for the
<em><a href="#key-alphanumeric-writing-system">writing system keys</a></em> because the values
generated by these keys vary based on the current keyboard locale. For keys not classified as
- <em>writing system</em> keys, this function returns the <code>code</code> for the key (i.e., it
+ <em>writing system</em> keys or for keys that do not generate printable characters,
+ this function returns the <code>code</code> for the key (i.e., it
returns that same value that was passed in). Note that the <code class="key-code">'AltRight'</code>
key always returns 'AltRight', even though some locales have this key labeled
<code class="keycap">AltGr</code>.
</p>
+ <p>Dead keys should return the combining accent character.
+ </p>
<p>The value 'Undefined' is returned if the <code>locale</code>'s keyboard does not contain the key
specified by <code>code</code>.
- For example, calling <code>queryKeyCap('IntlRo', 'en-US')</code> would return 'Undefined' because the
- <code class="key-code">'IntlRo'</code> key isn't present on a US keyboard.
</p>
<dl class="parameters">
<dt>DOMString code</dt>
@@ -454,7 +475,45 @@
</dd>
</dl>
</dd>
+
+ <dt>DOMString queryLocale()</dt>
+ <dd>
+ <p>Returns the current keyboard locale as a [[!BCP47]] string, such as 'en-US' or 'fr-FR'.
+ The value returned here is encoded the same as the value in the KeyboardEvent <code>locale</code>
+ attribute.
+ </p>
+ </dd>
</dl>
+
+ <pre class="example">
+ <p class="example-title">Calling <code>queryKeycap</code> for various keys
+ </p>
+ queryKeyCap('KeyA') => <code class="glyph">'a'</code> <span class="example-comment">Default locale is 'en-US'</span>
+ queryKeyCap('KeyA', 'en-US') => <code class="glyph">'a'</code>
+ queryKeyCap('KeyA', 'fr-FR') => <code class="glyph">'q'</code>
+ queryKeyCap('Digit2', 'en-US') => <code class="glyph">'2'</code>
+ queryKeyCap('Digit2', 'fr-FR') => <code class="glyph">'é'</code> ('\u00e9')
+ queryKeyCap('IntlRo', 'en-US') => <code class="key-code">'Undefined'</code> <span class="example-comment">Key doesn't exist in US keyboard</span>
+ queryKeyCap('IntlRo', 'ja-JP') => <code class="glyph">'ろ'</code> ('\u308d')
+ queryKeyCap('Quote', 'nl-US') => <code class="glyph">'´'</code> ('\u0301') <span class="example-comment">Combining accent</span>
+ queryKeyCap('Quote', 'ru-RU') => <code class="glyph">'э'</code> ('\u042d')
+ queryKeyCap('BackQuote', 'en-US') => <code class="glyph">'`'</code>
+ queryKeyCap('BackQuote', 'ja-JP') => <code class="key-code">'BackQuote'</code> <span class="example-comment">Non-printable Halfwidth/Fullwidth Mode key</span>
+ queryKeyCap('Space') => <code class="key-code">'Space'</code> <span class="example-comment">Non-printable</span>
+ queryKeyCap('ShiftLeft') => <code class="key-code">'ShiftLeft'</code> <span class="example-comment">Non-printable</span>
+
+ <p class="example-text">
+ The value returned by <code>queryKeyCap</code> is suitable to be presented to a user (for example, in a
+ preferences dialog that allows the user to customize the key mappings) unless the returned value is
+ <code class="key-code">'Undefined'</code>
+ or if it is equal to the <code>code</code> that was passed in to the method.
+ </p></pre>
+
+ <pre class="example">
+ <p class="example-title">Getting the current keycap for <code class="key-code">'KeyA'</code>
+ </p>
+ queryKeyCap('KeyA', queryLocale())
+ </pre>
</section>
<section id="key-codes">
@@ -516,92 +575,92 @@
</section>
<pre class="example">
- <p class="example-title">Handling the Left and Right Alt Keys
- </p><table class="data-table">
- <thead><tr><th>Keyboard Layout</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
- <tbody>
- <tr><td>US</td><td><code class="glyph">''</code></td><td><code class="key-code">'Alt'</code></td><td><code class="key-code">'AltLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
- <tr><td>French</td><td><code class="glyph">''</code></td><td><code class="key-code">'Alt'</code></td><td><code class="key-code">'AltLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_STANDARD</code></td></tr>
- <tr><td>US</td><td><code class="glyph">''</code></td><td><code class="key-code">'Alt'</code></td><td><code class="key-code">'AltRight'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_RIGHT</code></td></tr>
- <tr><td>French</td><td><code class="glyph">''</code></td><td><code class="key-code">'AltGr'</code></td><td><code class="key-code">'AltRight'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_STANDARD</code></td></tr>
- </tbody>
- </table><p class="example-text">
- In this example, checking the <code>key</code> attribute permits matching <code class="key-code">'Alt'</code> without worrying about which Alt key (left or right) was pressed.
- Checking the <code>code</code> attribute permits matching the right Alt key (<code class="key-code">'AltRight'</code>) without worrying about which layout is currently in effect.
- </p><p class="example-text">Note that, with the French layout, the location for the Alt and AltGr keys is <code class="constant-name">DOM_KEY_LOCATION_STANDARD</code> since there
- is only one of each key.
- </p>
+ <p class="example-title">Handling the Left and Right Alt Keys
+ </p><table class="data-table">
+ <thead><tr><th>Keyboard Layout</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
+ <tbody>
+ <tr><td>US</td><td><code class="glyph">''</code></td><td><code class="key-code">'Alt'</code></td><td><code class="key-code">'AltLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
+ <tr><td>French</td><td><code class="glyph">''</code></td><td><code class="key-code">'Alt'</code></td><td><code class="key-code">'AltLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_STANDARD</code></td></tr>
+ <tr><td>US</td><td><code class="glyph">''</code></td><td><code class="key-code">'Alt'</code></td><td><code class="key-code">'AltRight'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_RIGHT</code></td></tr>
+ <tr><td>French</td><td><code class="glyph">''</code></td><td><code class="key-code">'AltGr'</code></td><td><code class="key-code">'AltRight'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_STANDARD</code></td></tr>
+ </tbody>
+ </table><p class="example-text">
+ In this example, checking the <code>key</code> attribute permits matching <code class="key-code">'Alt'</code> without worrying about which Alt key (left or right) was pressed.
+ Checking the <code>code</code> attribute permits matching the right Alt key (<code class="key-code">'AltRight'</code>) without worrying about which layout is currently in effect.
+ </p><p class="example-text">Note that, with the French layout, the location for the Alt and AltGr keys is <code class="constant-name">DOM_KEY_LOCATION_STANDARD</code> since there
+ is only one of each key.
+ </p>
</pre><!-- Handling Left and Right Alt Keys -->
<pre class="example">
- <p class="example-title">Handling the Single Quote Key
- </p><table class="data-table">
- <thead><tr><th>Keyboard Layout</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
- <tbody>
- <tr><td>US</td><td><code class="glyph">'''</code></td><td><code class="key-code">'''</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
- <tr><td>Japanese</td><td><code class="glyph">':'</code></td><td><code class="key-code">':'</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
- <tr><td>US Intl</td><td><code class="glyph">''</code></td><td><code class="key-code">'DeadAcute'</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
- </tbody>
- </table><p class="example-text">
- This example shows how dead key values are encoded in the attributes. The <code>char</code> and
- <code>key</code> values vary based on the current locale, whereas the <code>code</code> attribute
- returns a consistent value.
- </p>
+ <p class="example-title">Handling the Single Quote Key
+ </p><table class="data-table">
+ <thead><tr><th>Keyboard Layout</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
+ <tbody>
+ <tr><td>US</td><td><code class="glyph">'''</code></td><td><code class="key-code">'''</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
+ <tr><td>Japanese</td><td><code class="glyph">':'</code></td><td><code class="key-code">':'</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
+ <tr><td>US Intl</td><td><code class="glyph">''</code></td><td><code class="key-code">'DeadAcute'</code></td><td><code class="key-code">'Quote'</code></td><td></td></tr>
+ </tbody>
+ </table><p class="example-text">
+ This example shows how dead key values are encoded in the attributes. The <code>char</code> and
+ <code>key</code> values vary based on the current locale, whereas the <code>code</code> attribute
+ returns a consistent value.
+ </p>
</pre><!-- Handling the Single Quote Key -->
<pre class="example">
- <p class="example-title">Handling the '2' Key (with and without Shift pressed)
- </p>
- <table class="data-table">
- <thead><tr><th>Keyboard Layout</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
- <tbody>
- <tr><td>US</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
- <tr><td>US</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
- <tr><td>UK</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
- <tr><td>UK</td><td><code class="glyph">'"'</code></td><td><code class="key-code">'"'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
- <tr><td>French</td><td><code class="glyph">'é'</code></td><td><code class="key-code">'é'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
- <tr><td>French</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
- </tbody>
- </table><p class="example-text">
- Regardless of the current locale or the modifier key state, pressing the key labelled <code class="keycap">2</code>
- on a US keyboard always results in <code class="key-code">'Digit2'</code> in the <code>code</code> attribute.
- </p>
+ <p class="example-title">Handling the '2' Key (with and without Shift pressed)
+ </p>
+ <table class="data-table">
+ <thead><tr><th>Keyboard Layout</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
+ <tbody>
+ <tr><td>US</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
+ <tr><td>US</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
+ <tr><td>UK</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
+ <tr><td>UK</td><td><code class="glyph">'"'</code></td><td><code class="key-code">'"'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
+ <tr><td>French</td><td><code class="glyph">'é'</code></td><td><code class="key-code">'é'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
+ <tr><td>French</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
+ </tbody>
+ </table><p class="example-text">
+ Regardless of the current locale or the modifier key state, pressing the key labelled <code class="keycap">2</code>
+ on a US keyboard always results in <code class="key-code">'Digit2'</code> in the <code>code</code> attribute.
+ </p>
</pre><!-- Handling the 2 Key -->
<pre class="example">
- <p class="example-title">Sequence of Keyboard Events : Shift and '2'
- </p><p class="example-text">
- Compare the attribute values in the following two key event sequences. They both produce the
- <code class="glyph">'@'</code> character on a US keyboard, but differ in the order in which the
- keys are released. In the first sequence, the order is Shift (down), 2 (down), 2 (up), Shift (up).
- </p>
- <table class="data-table">
- <thead><tr><th>Keyboard Layout</th><th>Event</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
- <tbody>
- <tr><td>US</td><td>keydown</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
- <tr><td>US</td><td>keydown</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
- <tr><td>US</td><td>keypress</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">''</code></td><td></td></tr>
- <tr><td>US</td><td>keyup</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
- <tr><td>US</td><td>keyup</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
- </tbody>
- </table><p class="example-text">
- In the second sequence, the Shift is released before the 2, resulting in the following event order:
- Shift (down), 2 (down), Shift (up), 2 (up).
- </p>
- <table class="data-table">
- <thead><tr><th>Keyboard Layout</th><th>Event</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
- <tbody>
- <tr><td>US</td><td>keydown</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
- <tr><td>US</td><td>keydown</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
- <tr><td>US</td><td>keypress</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">''</code></td><td></td></tr>
- <tr><td>US</td><td>keyup</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
- <tr><td>US</td><td>keyup</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
- </tbody>
- </table><p class="example-text">
- Note that the values contained in the <code>char</code> and <code>key</code> attributes do not match between
- the keydown and keyup events for the '2' key. The <code>code</code> attribute provides a consistent value
- that is not affected by the current modifier state.
- </p>
+ <p class="example-title">Sequence of Keyboard Events : Shift and '2'
+ </p><p class="example-text">
+ Compare the attribute values in the following two key event sequences. They both produce the
+ <code class="glyph">'@'</code> character on a US keyboard, but differ in the order in which the
+ keys are released. In the first sequence, the order is Shift (down), 2 (down), 2 (up), Shift (up).
+ </p>
+ <table class="data-table">
+ <thead><tr><th>Keyboard Layout</th><th>Event</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
+ <tbody>
+ <tr><td>US</td><td>keydown</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
+ <tr><td>US</td><td>keydown</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
+ <tr><td>US</td><td>keypress</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">''</code></td><td></td></tr>
+ <tr><td>US</td><td>keyup</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
+ <tr><td>US</td><td>keyup</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
+ </tbody>
+ </table><p class="example-text">
+ In the second sequence, the Shift is released before the 2, resulting in the following event order:
+ Shift (down), 2 (down), Shift (up), 2 (up).
+ </p>
+ <table class="data-table">
+ <thead><tr><th>Keyboard Layout</th><th>Event</th><th><code>char</code></th><th><code>key</code></th><th><code>code</code></th><th>Notes</th></tr></thead>
+ <tbody>
+ <tr><td>US</td><td>keydown</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
+ <tr><td>US</td><td>keydown</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">'Digit2'</code></td><td><code class="constant-name">shiftKey</code></td></tr>
+ <tr><td>US</td><td>keypress</td><td><code class="glyph">'@'</code></td><td><code class="key-code">'@'</code></td><td><code class="key-code">''</code></td><td></td></tr>
+ <tr><td>US</td><td>keyup</td><td><code class="glyph">''</code></td><td><code class="key-code">'Shift'</code></td><td><code class="key-code">'ShiftLeft'</code></td><td><code class="constant-name">DOM_KEY_LOCATION_LEFT</code></td></tr>
+ <tr><td>US</td><td>keyup</td><td><code class="glyph">'2'</code></td><td><code class="key-code">'2'</code></td><td><code class="key-code">'Digit2'</code></td><td></td></tr>
+ </tbody>
+ </table><p class="example-text">
+ Note that the values contained in the <code>char</code> and <code>key</code> attributes do not match between
+ the keydown and keyup events for the '2' key. The <code>code</code> attribute provides a consistent value
+ that is not affected by the current modifier state.
+ </p>
</pre><!-- Sequence of Keyboard Events: Shift and 2 -->
</section>
@@ -910,8 +969,6 @@
<td>0x33</td><td><code class="keycap">;</code> and <code class="keycap">:</code> on a US keyboard.</td></tr>
<tr><td><code id="code-Slash" class="key-code">'Slash'</code></td>
<td>0x38</td><td><code class="keycap">/</code> and <code class="keycap">?</code> on a US keyboard.</td></tr>
- <tr><td><code id="code-Space" class="key-code">'Space'</code></td>
- <td>0x2c</td><td><code class="keycap"> </code></td></tr>
</tbody>
</table>
</section>
@@ -951,6 +1008,8 @@
<td>0xe1</td><td></td></tr>
<tr><td><code id="code-ShiftRight" class="key-code">'ShiftRight'</code></td>
<td>0xe5</td><td></td></tr>
+ <tr><td><code id="code-Space" class="key-code">'Space'</code></td>
+ <td>0x2c</td><td>The <code class="keycap"> </code> key.</td></tr>
<tr><td><code id="code-Tab" class="key-code">'Tab'</code></td>
<td>0x2b</td><td></td></tr>
</tbody>
@@ -1106,7 +1165,7 @@
<td>0x56</td><td><code class="keycap">-</code></td></tr>
</tbody>
</table>
- <p>For Numpads that provide keys not listed here, a <code>code</code> value should be created by
+ <p>For Numpads that provide keys not listed here, a <code>code</code> value string should be created by
starting with 'Numpad' and appending an appropriate description of the key.
</p>
</section>