--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/WD-UI-Events-20130720.html Mon Nov 04 10:17:19 2013 -0800
@@ -0,0 +1,1917 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr" typeof="bibo:Document">
+<head>
+ <meta charset="utf-8">
+ <title>UI Events</title>
+
+
+ <style>/* --- EXAMPLES --- */
+div.example-title {
+ min-width: 7.5em;
+ color: #b9ab2d;
+}
+div.example-title span {
+ text-transform: uppercase;
+}
+aside.example, div.example, div.illegal-example {
+ padding: 0.5em;
+ margin: 1em 0;
+ position: relative;
+ clear: both;
+}
+div.illegal-example { color: red }
+div.illegal-example p { color: black }
+aside.example, div.example {
+ padding: .5em;
+ border-left-width: .5em;
+ border-left-style: solid;
+ border-color: #e0cb52;
+ background: #fcfaee;
+}
+
+aside.example div.example {
+ border-left-width: .1em;
+ border-color: #999;
+ background: #fff;
+}
+aside.example div.example div.example-title {
+ color: #999;
+}
+</style><style>/* --- ISSUES/NOTES --- */
+div.issue-title, div.note-title {
+ padding-right: 1em;
+ min-width: 7.5em;
+ color: #b9ab2d;
+}
+div.issue-title { color: #e05252; }
+div.note-title { color: #2b2; }
+div.issue-title span, div.note-title span {
+ text-transform: uppercase;
+}
+div.note, div.issue {
+ margin-top: 1em;
+ margin-bottom: 1em;
+}
+.note > p:first-child, .issue > p:first-child { margin-top: 0 }
+.issue, .note {
+ padding: .5em;
+ border-left-width: .5em;
+ border-left-style: solid;
+}
+div.issue, div.note {
+ padding: 1em 1.2em 0.5em;
+ margin: 1em 0;
+ position: relative;
+ clear: both;
+}
+span.note, span.issue { padding: .1em .5em .15em; }
+
+.issue {
+ border-color: #e05252;
+ background: #fbe9e9;
+}
+.note {
+ border-color: #52e052;
+ background: #e9fbe9;
+}
+
+
+</style><style>/* --- WEB IDL --- */
+pre.idl {
+ border-top: 1px solid #90b8de;
+ border-bottom: 1px solid #90b8de;
+ padding: 1em;
+ line-height: 120%;
+}
+
+pre.idl::before {
+ content: "WebIDL";
+ display: block;
+ width: 150px;
+ background: #90b8de;
+ color: #fff;
+ font-family: initial;
+ padding: 3px;
+ font-weight: bold;
+ margin: -1em 0 1em -1em;
+}
+
+.idlType {
+ color: #ff4500;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+/*.idlModule*/
+/*.idlModuleID*/
+/*.idlInterface*/
+.idlInterfaceID, .idlDictionaryID, .idlCallbackID, .idlEnumID {
+ font-weight: bold;
+ color: #005a9c;
+}
+a.idlEnumItem {
+ color: #000;
+ border-bottom: 1px dotted #ccc;
+ text-decoration: none;
+}
+
+.idlSuperclass {
+ font-style: italic;
+ color: #005a9c;
+}
+
+/*.idlAttribute*/
+.idlAttrType, .idlFieldType, .idlMemberType {
+ color: #005a9c;
+}
+.idlAttrName, .idlFieldName, .idlMemberName {
+ color: #ff4500;
+}
+.idlAttrName a, .idlFieldName a, .idlMemberName a {
+ color: #ff4500;
+ border-bottom: 1px dotted #ff4500;
+ text-decoration: none;
+}
+
+/*.idlMethod*/
+.idlMethType, .idlCallbackType {
+ color: #005a9c;
+}
+.idlMethName {
+ color: #ff4500;
+}
+.idlMethName a {
+ color: #ff4500;
+ border-bottom: 1px dotted #ff4500;
+ text-decoration: none;
+}
+
+/*.idlCtor*/
+.idlCtorName {
+ color: #ff4500;
+}
+.idlCtorName a {
+ color: #ff4500;
+ border-bottom: 1px dotted #ff4500;
+ text-decoration: none;
+}
+
+/*.idlParam*/
+.idlParamType {
+ color: #005a9c;
+}
+.idlParamName, .idlDefaultValue {
+ font-style: italic;
+}
+
+.extAttr {
+ color: #666;
+}
+
+/*.idlSectionComment*/
+.idlSectionComment {
+ color: gray;
+}
+
+/*.idlConst*/
+.idlConstType {
+ color: #005a9c;
+}
+.idlConstName {
+ color: #ff4500;
+}
+.idlConstName a {
+ color: #ff4500;
+ border-bottom: 1px dotted #ff4500;
+ text-decoration: none;
+}
+
+/*.idlException*/
+.idlExceptionID {
+ font-weight: bold;
+ color: #c00;
+}
+
+.idlTypedefID, .idlTypedefType {
+ color: #005a9c;
+}
+
+.idlRaises, .idlRaises a.idlType, .idlRaises a.idlType code, .excName a, .excName a code {
+ color: #c00;
+ font-weight: normal;
+}
+
+.excName a {
+ font-family: monospace;
+}
+
+.idlRaises a.idlType, .excName a.idlType {
+ border-bottom: 1px dotted #c00;
+}
+
+.excGetSetTrue, .excGetSetFalse, .prmNullTrue, .prmNullFalse, .prmOptTrue, .prmOptFalse {
+ width: 45px;
+ text-align: center;
+}
+.excGetSetTrue, .prmNullTrue, .prmOptTrue { color: #0c0; }
+.excGetSetFalse, .prmNullFalse, .prmOptFalse { color: #c00; }
+
+.idlImplements a {
+ font-weight: bold;
+}
+
+dl.attributes, dl.methods, dl.constants, dl.constructors, dl.fields, dl.dictionary-members {
+ margin-left: 2em;
+}
+
+.attributes dt, .methods dt, .constants dt, .constructors dt, .fields dt, .dictionary-members dt {
+ font-weight: normal;
+}
+
+.attributes dt code, .methods dt code, .constants dt code, .constructors dt code, .fields dt code, .dictionary-members dt code {
+ font-weight: bold;
+ color: #000;
+ font-family: monospace;
+}
+
+.attributes dt code, .fields dt code, .dictionary-members dt code {
+ background: #ffffd2;
+}
+
+.attributes dt .idlAttrType code, .fields dt .idlFieldType code, .dictionary-members dt .idlMemberType code {
+ color: #005a9c;
+ background: transparent;
+ font-family: inherit;
+ font-weight: normal;
+ font-style: italic;
+}
+
+.methods dt code {
+ background: #d9e6f8;
+}
+
+.constants dt code {
+ background: #ddffd2;
+}
+
+.constructors dt code {
+ background: #cfc;
+}
+
+.attributes dd, .methods dd, .constants dd, .constructors dd, .fields dd, .dictionary-members dd {
+ margin-bottom: 1em;
+}
+
+table.parameters, table.exceptions {
+ border-spacing: 0;
+ border-collapse: collapse;
+ margin: 0.5em 0;
+ width: 100%;
+}
+table.parameters { border-bottom: 1px solid #90b8de; }
+table.exceptions { border-bottom: 1px solid #deb890; }
+
+.parameters th, .exceptions th {
+ color: #fff;
+ padding: 3px 5px;
+ text-align: left;
+ font-family: initial;
+ font-weight: normal;
+ text-shadow: #666 1px 1px 0;
+}
+.parameters th { background: #90b8de; }
+.exceptions th { background: #deb890; }
+
+.parameters td, .exceptions td {
+ padding: 3px 10px;
+ border-top: 1px solid #ddd;
+ vertical-align: top;
+}
+
+.parameters tr:first-child td, .exceptions tr:first-child td {
+ border-top: none;
+}
+
+.parameters td.prmName, .exceptions td.excName, .exceptions td.excCodeName {
+ width: 100px;
+}
+
+.parameters td.prmType {
+ width: 120px;
+}
+
+table.exceptions table {
+ border-spacing: 0;
+ border-collapse: collapse;
+ width: 100%;
+}
+</style><link rel="stylesheet" type="text/css" href="table.css" media="screen">
+<style>/*****************************************************************
+ * ReSpec 3 CSS
+ * Robin Berjon - http://berjon.com/
+ *****************************************************************/
+
+/* --- INLINES --- */
+em.rfc2119 {
+ text-transform: lowercase;
+ font-variant: small-caps;
+ font-style: normal;
+ color: #900;
+}
+
+h1 acronym, h2 acronym, h3 acronym, h4 acronym, h5 acronym, h6 acronym, a acronym,
+h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr, a abbr {
+ border: none;
+}
+
+dfn {
+ font-weight: bold;
+}
+
+a.internalDFN {
+ color: inherit;
+ border-bottom: 1px solid #99c;
+ text-decoration: none;
+}
+
+a.externalDFN {
+ color: inherit;
+ border-bottom: 1px dotted #ccc;
+ text-decoration: none;
+}
+
+a.bibref {
+ text-decoration: none;
+}
+
+cite .bibref {
+ font-style: normal;
+}
+
+code {
+ color: #ff4500;
+}
+
+/* --- TOC --- */
+.toc a, .tof a {
+ text-decoration: none;
+}
+
+a .secno, a .figno {
+ color: #000;
+}
+
+ul.tof, ol.tof {
+ list-style: none outside none;
+}
+
+.caption {
+ margin-top: 0.5em;
+ font-style: italic;
+}
+
+/* --- TABLE --- */
+table.simple {
+ border-spacing: 0;
+ border-collapse: collapse;
+ border-bottom: 3px solid #005a9c;
+}
+
+.simple th {
+ background: #005a9c;
+ color: #fff;
+ padding: 3px 5px;
+ text-align: left;
+}
+
+.simple th[scope="row"] {
+ background: inherit;
+ color: inherit;
+ border-top: 1px solid #ddd;
+}
+
+.simple td {
+ padding: 3px 10px;
+ border-top: 1px solid #ddd;
+}
+
+.simple tr:nth-child(even) {
+ background: #f0f6ff;
+}
+
+/* --- DL --- */
+.section dd > p:first-child {
+ margin-top: 0;
+}
+
+.section dd > p:last-child {
+ margin-bottom: 0;
+}
+
+.section dd {
+ margin-bottom: 1em;
+}
+
+.section dl.attrs dd, .section dl.eldef dd {
+ margin-bottom: 0;
+}
+</style><link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/W3C-WD"><!--[if lt IE 9]><script src='https://www.w3.org/2008/site/js/html5shiv.js'></script><![endif]--></head>
+<body class="h-entry"><div class="head">
+ <p>
+
+ <a href="http://www.w3.org/"><img height="48" width="72" alt="W3C" src="http://www.w3.org/Icons/w3c_home"/></a>
+
+ </p>
+ <h1 class="title p-name" id="title" property="dcterms:title">UI Events</h1>
+
+ <h2 property="dcterms:issued" id="w3c-fpwd-25-july-2013"><abbr title="World Wide Web Consortium">W3C</abbr> First Public Working Draft <time class="dt-published" datetime="2013-07-25">25 July 2013</time></h2>
+ <dl>
+
+ <dt>This version:</dt>
+ <dd><a class="u-url" href="http://www.w3.org/TR/2013/WD-uievents-20130725/">http://www.w3.org/TR/2013/WD-uievents-20130725/</a></dd>
+ <dt>Latest published version:</dt>
+ <dd><a href="http://www.w3.org/TR/uievents/">http://www.w3.org/TR/uievents/</a></dd>
+
+ <dt>Previous version:</dt>
+ <dd>None</dd>
+
+ <dt>Latest editor's draft:</dt>
+ <dd><a href="https://dvcs.w3.org/hg/d4e/raw-file/tip/source_respec.htm">https://dvcs.w3.org/hg/d4e/raw-file/tip/source_respec.htm</a></dd>
+
+
+
+
+
+
+
+
+ <dt>Editors:</dt>
+ <dd class="p-author h-card vcard"><span typeof="foaf:Person"><a class="u-url url p-name fn" rel="foaf:homepage" property="foaf:name" href="mailto:travis.leithead@microsoft.com?subject=%5BD4E%5D%20Spec%20Feedback">Travis Leithead</a>, <a rel="foaf:workplaceHomepage" class="p-org org h-org h-card" href="http://www.microsoft.com">Microsoft Corp.</a></span>
+</dd>
+<dd class="p-author h-card vcard"><span typeof="foaf:Person"><a class="u-url url p-name fn" rel="foaf:homepage" property="foaf:name" href="mailto:garykac@google.com?subject=%5BD4E%5D%20Spec%20Feedback">Gary Kacmarcik</a>, <a rel="foaf:workplaceHomepage" class="p-org org h-org h-card" href="http://www.google.com">Google, Inc.</a></span>
+</dd>
+
+
+
+ </dl>
+
+
+
+
+
+ <p class="copyright">
+ <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> ©
+ 2013
+
+ <a href="http://www.w3.org/"><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup>
+ (<a href="http://www.csail.mit.edu/"><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>,
+ <a href="http://www.ercim.eu/"><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>,
+ <a href="http://www.keio.ac.jp/">Keio</a>, <a href="http://ev.buaa.edu.cn/">Beihang</a>), All Rights Reserved.
+ <abbr title="World Wide Web Consortium">W3C</abbr> <a href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
+ <a href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a> and
+ <a href="http://www.w3.org/Consortium/Legal/copyright-documents">document use</a> rules apply.
+ </p>
+
+
+ <hr>
+</div>
+ <section id="abstract" class="introductory" property="dcterms:abstract" typeof="bibo:Chapter" resource="#abstract" ><h2>Abstract</h2>
+ <p>This specification extends the events and features defined in DOM Events
+ Level 3.</p>
+ </section><section id="sotd" class="introductory" typeof="bibo:Chapter" resource="#sotd" ><h2>Status of This Document</h2>
+
+
+
+ <p>
+ <em>This section describes the status of this document at the time of its publication. Other
+ documents may supersede this document. A list of current <abbr title="World Wide Web Consortium">W3C</abbr> publications and the latest revision
+ of this technical report can be found in the <a href="http://www.w3.org/TR/"><abbr title="World Wide Web Consortium">W3C</abbr> technical reports
+ index</a> at http://www.w3.org/TR/.</em>
+ </p>
+
+ <p>
+ This document was published by the <a href="http://www.w3.org/2008/webapps/">Web Applications Working Group</a> as a First Public Working Draft.
+
+ If you wish to make comments regarding this document, please send them to
+ <a href="mailto:www-dom@w3.org">www-dom@w3.org</a>
+ (<a href="mailto:www-dom-request@w3.org?subject=subscribe">subscribe</a>,
+ <a href="http://lists.w3.org/Archives/Public/www-dom/">archives</a>)
+ using a subject prefix of <code>[uievents]</code>. All comments are welcome.
+ There is a
+ <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=WebAppsWG&component=UI%20Events&resolution=---&list_id=20132">bug tracker</a>
+ for this specification.</p>
+
+ <p>
+ Publication as a First Public Working Draft does not imply endorsement by the
+ <abbr title="World Wide Web Consortium">W3C</abbr> Membership.
+ This is a draft document and may be updated, replaced or obsoleted by other documents at
+ any time. It is inappropriate to cite this document as other than work in progress.
+ </p>
+
+ <p>
+ This document was produced by a group operating under the
+ <a id="sotd_patent" rel="w3p:patentRules" href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February 2004 <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>.
+
+ <abbr title="World Wide Web Consortium">W3C</abbr> maintains a <a href="http://www.w3.org/2004/01/pp-impl/42538/status" rel="disclosure">public list of any patent disclosures</a>
+
+ made in connection with the deliverables of the group; that page also includes instructions for
+ disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains
+ <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential Claim(s)</a> must disclose the
+ information in accordance with <a href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
+ 6 of the <abbr title="World Wide Web Consortium">W3C</abbr> Patent Policy</a>.
+
+
+ </p>
+
+
+
+
+</section><section id="toc"><h2 class="introductory">Table of Contents</h2><ul class="toc"><li class="tocline"><a href="#conformance" class="tocxref"><span class="secno">1. </span>Conformance</a></li><li class="tocline"><a href="#goals" class="tocxref"><span class="secno">2. </span>Goals</a></li><li class="tocline"><a href="#event-constructors" class="tocxref"><span class="secno">3. </span>Event Constructors</a><ul class="toc"><li class="tocline"><a href="#constructor-uievent" class="tocxref"><span class="secno">3.1 </span><code>UIEvent</code> Constructor</a><ul class="toc"><li class="tocline"><a href="#dictionary-uieventinit-members" class="tocxref"><span class="secno">3.1.1 </span>Dictionary <span class="formerLink"><code>UIEventInit</code></span> Members</a></li></ul></li><li class="tocline"><a href="#constructor-focusevent" class="tocxref"><span class="secno">3.2 </span><code>FocusEvent</code> Constructor</a><ul class="toc"><li class="tocline"><a href="#dictionary-focuseventinit-members" class="tocxref"><span class="secno">3.2.1 </span>Dictionary <span class="formerLink"><code>FocusEventInit</code></span> Members</a></li></ul></li><li class="tocline"><a href="#constructor-mouseevent" class="tocxref"><span class="secno">3.3 </span><code>MouseEvent</code> Constructor</a><ul class="toc"><li class="tocline"><a href="#dictionary-mouseeventinit-members" class="tocxref"><span class="secno">3.3.1 </span>Dictionary <span class="formerLink"><code>MouseEventInit</code></span> Members</a></li></ul></li><li class="tocline"><a href="#constructor-wheelevent" class="tocxref"><span class="secno">3.4 </span><code>WheelEvent</code> Constructor</a><ul class="toc"><li class="tocline"><a href="#dictionary-wheeleventinit-members" class="tocxref"><span class="secno">3.4.1 </span>Dictionary <span class="formerLink"><code>WheelEventInit</code></span> Members</a></li></ul></li><li class="tocline"><a href="#constructor-keyboardevent" class="tocxref"><span class="secno">3.5 </span><code>KeyboardEvent</code> Constructor</a><ul class="toc"><li class="tocline"><a href="#dictionary-keyboardeventinit-members" class="tocxref"><span class="secno">3.5.1 </span>Dictionary <span class="formerLink"><code>KeyboardEventInit</code></span> Members</a></li></ul></li><li class="tocline"><a href="#constructor-compositionevent" class="tocxref"><span class="secno">3.6 </span><code>CompositionEvent</code> Constructor</a><ul class="toc"><li class="tocline"><a href="#dictionary-compositioneventinit-members" class="tocxref"><span class="secno">3.6.1 </span>Dictionary <span class="formerLink"><code>CompositionEventInit</code></span> Members</a></li></ul></li></ul></li><li class="tocline"><a href="#keyboard-events" class="tocxref"><span class="secno">4. </span>Keyboard Events</a><ul class="toc"><li class="tocline"><a href="#keyboard-event-interface" class="tocxref"><span class="secno">4.1 </span>Interface <code>KeyboardEvent</code></a><ul class="toc"><li class="tocline"><a href="#attributes" class="tocxref"><span class="secno">4.1.1 </span>Attributes</a></li><li class="tocline"><a href="#methods" class="tocxref"><span class="secno">4.1.2 </span>Methods</a></li></ul></li><li class="tocline"><a href="#key-codes" class="tocxref"><span class="secno">4.2 </span>Key codes</a><ul class="toc"><li class="tocline"><a href="#key-event-motivation" class="tocxref"><span class="secno">4.2.1 </span>Motivation for Adding the <code>code</code> Attribute</a></li><li class="tocline"><a href="#key-event-attributes" class="tocxref"><span class="secno">4.2.2 </span>The Relationship Between <code>char</code>, <code>key</code> and <code>code</code></a></li></ul></li><li class="tocline"><a href="#keyboards" class="tocxref"><span class="secno">4.3 </span>Keyboards</a><ul class="toc"><li class="tocline"><a href="#keyboard-sections" class="tocxref"><span class="secno">4.3.1 </span>Keyboard Sections</a></li><li class="tocline"><a href="#keyboard-common-layouts" class="tocxref"><span class="secno">4.3.2 </span>Standard Keyboard Layouts</a><ul class="toc"><li class="tocline"><a href="#keyboard-101" class="tocxref"><span class="secno">4.3.2.1 </span>Standard "101" Keyboard Layout</a></li><li class="tocline"><a href="#keyboard-101alt" class="tocxref"><span class="secno">4.3.2.2 </span>Alternate "101" Keyboard Layout</a></li><li class="tocline"><a href="#keyboard-102" class="tocxref"><span class="secno">4.3.2.3 </span>Standard "102" Keyboard Layout</a></li><li class="tocline"><a href="#keyboard-103" class="tocxref"><span class="secno">4.3.2.4 </span>Korean "103" Keyboard Layout</a></li><li class="tocline"><a href="#keyboard-104" class="tocxref"><span class="secno">4.3.2.5 </span>Brazilian "104" Keyboard Layout</a></li><li class="tocline"><a href="#keyboard-106" class="tocxref"><span class="secno">4.3.2.6 </span>Japanese "106" Keyboard Layout</a></li><li class="tocline"><a href="#keyboard-mac" class="tocxref"><span class="secno">4.3.2.7 </span>Apple Keyboard Layout</a></li><li class="tocline"><a href="#keyboard-laptops" class="tocxref"><span class="secno">4.3.2.8 </span>Laptop Keyboard Layouts</a></li></ul></li><li class="tocline"><a href="#keyboard-key-codes" class="tocxref"><span class="secno">4.3.3 </span>Key Codes for Standard Keyboards</a><ul class="toc"><li class="tocline"><a href="#key-alphanumeric-section" class="tocxref"><span class="secno">4.3.3.1 </span>Alphanumeric Section</a></li><li class="tocline"><a href="#key-controlpad-section" class="tocxref"><span class="secno">4.3.3.2 </span>Control Pad Section</a></li><li class="tocline"><a href="#key-arrowpad-section" class="tocxref"><span class="secno">4.3.3.3 </span>Arrow Pad Section</a></li><li class="tocline"><a href="#key-numpad-section" class="tocxref"><span class="secno">4.3.3.4 </span>Numpad Section</a></li><li class="tocline"><a href="#key-function-section" class="tocxref"><span class="secno">4.3.3.5 </span>Function Section</a></li><li class="tocline"><a href="#key-media" class="tocxref"><span class="secno">4.3.3.6 </span>Media Keys</a></li><li class="tocline"><a href="#key-legacy" class="tocxref"><span class="secno">4.3.3.7 </span>Legacy Keys</a></li></ul></li></ul></li><li class="tocline"><a href="#non-keyboards" class="tocxref"><span class="secno">4.4 </span>Non-Standard Keyboards and Other Input Devices</a><ul class="toc"><li class="tocline"><a href="#remote-controls" class="tocxref"><span class="secno">4.4.1 </span>Media Remote Controls</a></li><li class="tocline"><a href="#virtual-keyboards" class="tocxref"><span class="secno">4.4.2 </span>Virtual Keyboards</a></li><li class="tocline"><a href="#chording-keyboards" class="tocxref"><span class="secno">4.4.3 </span>Chording Keyboards</a></li><li class="tocline"><a href="#other-devices" class="tocxref"><span class="secno">4.4.4 </span>Other Devices</a></li></ul></li></ul></li><li class="tocline"><a href="#references" class="tocxref"><span class="secno">A. </span>References</a><ul class="toc"><li class="tocline"><a href="#normative-references" class="tocxref"><span class="secno">A.1 </span>Normative references</a></li></ul></li></ul></section>
+
+
+
+ <section id="conformance" typeof="bibo:Chapter" resource="#conformance" ><!--OddPage--><h2><span class="secno">1. </span>Conformance</h2>
+<p>
+ As well as sections marked as non-normative, all authoring guidelines, diagrams, examples,
+ and notes in this specification are non-normative. Everything else in this specification is
+ normative.
+</p>
+<p>
+ The key words <em class="rfc2119" title="MUST">MUST</em>, <em class="rfc2119" title="MUST NOT">MUST NOT</em>, <em class="rfc2119" title="REQUIRED">REQUIRED</em>, <em class="rfc2119" title="SHOULD">SHOULD</em>, <em class="rfc2119" title="SHOULD NOT">SHOULD NOT</em>, <em class="rfc2119" title="RECOMMENDED">RECOMMENDED</em>, <em class="rfc2119" title="MAY">MAY</em>,
+ and <em class="rfc2119" title="OPTIONAL">OPTIONAL</em> in this specification are to be interpreted as described in [<cite><a class="bibref" href="#bib-RFC2119">RFC2119</a></cite>].
+</p>
+
+ <p>All diagrams, examples, and notes in this specification are non-normative,
+ as are all sections explicitly marked non-normative. Everything else in
+ this specification is normative.</p>
+
+ <p>Requirements phrased in the imperative as part of algorithms(such as "strip
+ any leading space characters" or "return false and terminate these steps")
+ are to be interpreted with the meaning of the key word ("must", "should",
+ "may", etc) used in introducing the algorithm.</p>
+
+ <p>Conformance requirements phrased as algorithms or specific steps may be
+ implemented in any manner, so long as the end result is equivalent.
+ (In particular, the algorithms defined in this specification are intended
+ to be easy to follow, and not intended to be performant.)</p>
+
+ <p>User agents may impose implementation-specific limits on otherwise
+ unconstrained inputs, e.g. to prevent denial of service attacks, to guard
+ against running out of memory, or to work around platform-specific
+ limitations.</p>
+
+ <p>When a method or an attribute is said to call another method or attribute,
+ the user agent must invoke its internal API for that attribute or method so
+ that e.g. the author can't change the behavior by overriding attributes or
+ methods with custom properties or functions in ECMAScript.</p>
+
+ <p>Unless otherwise stated, string comparisons are done in a case-sensitive
+ manner.</p>
+
+ <p>Implementations of this spec must also implement the following event
+ constructor dictionary defined in [<cite><a class="bibref" href="#bib-DOM4">DOM4</a></cite>]:</p>
+
+ <ul>
+ <li><code>EventInit</code></li>
+ </ul>
+ </section>
+
+ <section id="goals" typeof="bibo:Chapter" resource="#goals" >
+ <!--OddPage--><h2><span class="secno">2. </span>Goals</h2>
+ <p>UI Events builds on the event model defined in DOM Level 3 Events
+ (and also DOM4). Features in scope for this specification are:</p>
+
+ <ul>
+ <li>Methods for creating and dispatching synthetic events (event constructors)</li>
+ <li>Additional Keyboard event properties to allow for physical key location scenarios</li>
+ </ul>
+ </section>
+
+ <section id="event-constructors" typeof="bibo:Chapter" resource="#event-constructors" >
+ <!--OddPage--><h2><span class="secno">3. </span>Event Constructors</h2>
+
+ <p><em>This section is informative</em></p>
+
+ <p>DOM Level 3 Events defines several events, but does not normatively provide a
+ mechanism for programmatically-creating those events. Traditionally, an
+ <code>init*Event</code> method was defined, but the parameter list to such
+ methods became cumbersome and required an explicit order that was hard to
+ maintain without the help of a tool.
+ </p>
+
+ <p>For each event interface defined in [<cite><a class="bibref" href="#bib-DOM-LEVEL-3-EVENTS">DOM-LEVEL-3-EVENTS</a></cite>], there exists an initialization
+ method for synthesizing untrusted events. This mechanism does not scale well
+ to event interfaces with many members. Event Constructors (introduced for
+ the Event interface in [<cite><a class="bibref" href="#bib-DOM4">DOM4</a></cite>]) are a mechanism for creating and
+ initializing untrusted event objects more easily.
+ </p>
+
+ <div class="example" id="example-1">
+ <div class="example-title"><span>Example 1</span></div>
+ <p class="example-title">Synthesizing an untrusted event <em>using legacy initialization methods</em>:</p>
+ <pre class="example">
+var event = document.createEvent("MouseEvent");
+event.initMouseEvent("mouseover",
+ true,
+ true,
+ window,
+ null,
+ null,
+ null,
+ 0,
+ 0,
+ null,
+ null,
+ null,
+ null,
+ previousEventTarget);
+eventTarget.dispatchEvent(event);
+ </pre>
+ </div><!-- Synthesizing events - legacy -->
+
+<div class="example" id="example-2"><div class="example-title"><span>Example 2</span></div>
+<p class="example-title">Synthesizing an untrusted event <em>using constructors</em>: </p>
+ <pre class="example">
+var event = new MouseEvent("mouseover",
+ {bubbles: true,
+ cancelable: true,
+ relatedTarget: previousEventTarget
+ });
+eventTarget.dispatchEvent(event);</pre></div><!-- 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
+ <code>initMouseEvent()</code>, often requires the author to specify values
+ for numerous additional properties that are not needed.
+ </p>
+
+ <p>The following sections define constructors for the interfaces from DOM3 Events
+ [<cite><a class="bibref" href="#bib-DOM-LEVEL-3-EVENTS">DOM-LEVEL-3-EVENTS</a></cite>].
+ </p>
+
+ <section id="constructor-uievent" typeof="bibo:Chapter" resource="#constructor-uievent" >
+ <h3><span class="secno">3.1 </span><code>UIEvent</code> Constructor</h3>
+
+ <pre class="idl"><span class="idlInterface" id="idl-def-UIEvent">[<span class="extAttr">Constructor(DOMString type, optional UIEventInit eventInitDict)</span>]
+partial interface <span class="idlInterfaceID">UIEvent</span> : <span class="idlSuperclass"><a>Event</a></span> {
+};</span></pre>
+
+ <pre class="idl"><span class="idlDictionary" id="idl-def-UIEventInit">dictionary <span class="idlDictionaryID">UIEventInit</span> : <span class="idlSuperclass"><a>EventInit</a></span> {
+<span class="idlMember"> <span class="idlMemberType"><a>Window</a>?</span> <span class="idlMemberName"><a href="#widl-UIEventInit-view">view</a></span> = <span class="idlMemberValue">null</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>long</a></span> <span class="idlMemberName"><a href="#widl-UIEventInit-detail">detail</a></span> = <span class="idlMemberValue">0</span>;</span>
+};</span></pre><section id="dictionary-uieventinit-members"><h4><span class="secno">3.1.1 </span>Dictionary <a class="idlType" href="#idl-def-UIEventInit"><code>UIEventInit</code></a> Members</h4><dl class="dictionary-members"><dt id="widl-UIEventInit-detail"><code>detail</code> of type <span class="idlMemberType"><a>long</a></span>, defaulting to <code>0</code></dt><dd>This value is initialized to a number that is application-specific.</dd><dt id="widl-UIEventInit-view"><code>view</code> of type <span class="idlMemberType"><a>Window</a></span>, nullable, defaulting to <code>null</code></dt><dd>Should be initialized to the Window object of the global environment
+ in which this event will be dispatched. If this event will be dispatched
+ to an element, the view property should be set to the Window object
+ containing the element's <code>ownerDocument</code>.
+ </dd></dl></section>
+ </section>
+
+ <section id="constructor-focusevent" typeof="bibo:Chapter" resource="#constructor-focusevent" >
+ <h3><span class="secno">3.2 </span><code>FocusEvent</code> Constructor</h3>
+
+ <pre class="idl"><span class="idlInterface" id="idl-def-FocusEvent">[<span class="extAttr">Constructor(DOMString typeArg, optional FocusEventInit focusEventInitDict)</span>]
+partial interface <span class="idlInterfaceID">FocusEvent</span> {
+};</span></pre>
+
+ <pre class="idl"><span class="idlDictionary" id="idl-def-FocusEventInit">dictionary <span class="idlDictionaryID">FocusEventInit</span> : <span class="idlSuperclass"><a href="#idl-def-UIEventInit" class="idlType"><code>UIEventInit</code></a></span> {
+<span class="idlMember"> <span class="idlMemberType"><a>EventTarget</a>?</span> <span class="idlMemberName"><a href="#widl-FocusEventInit-relatedTarget">relatedTarget</a></span> = <span class="idlMemberValue">null</span>;</span>
+};</span></pre><section id="dictionary-focuseventinit-members"><h4><span class="secno">3.2.1 </span>Dictionary <a class="idlType" href="#idl-def-FocusEventInit"><code>FocusEventInit</code></a> Members</h4><dl class="dictionary-members"><dt id="widl-FocusEventInit-relatedTarget"><code>relatedTarget</code> of type <span class="idlMemberType"><a>EventTarget</a></span>, nullable, defaulting to <code>null</code></dt><dd>The <code>relatedTarget</code> should be initialized to the element
+ losing focus (in the case of a <em>focus</em> or <em>focusin</em>
+ event) or the element gaining focus (in the case of a <em>blur</em>
+ or <em>focusout</em> event).
+ </dd></dl></section>
+ </section>
+
+ <section id="constructor-mouseevent" typeof="bibo:Chapter" resource="#constructor-mouseevent" >
+ <h3><span class="secno">3.3 </span><code>MouseEvent</code> Constructor</h3>
+
+ <pre class="idl"><span class="idlInterface" id="idl-def-MouseEvent">[<span class="extAttr">Constructor(DOMString typeArg, optional MouseEventInit mouseEventInitDict)</span>]
+partial interface <span class="idlInterfaceID">MouseEvent</span> {
+};</span></pre>
+
+ <pre class="idl"><span class="idlDictionary" id="idl-def-MouseEventInit">dictionary <span class="idlDictionaryID">MouseEventInit</span> : <span class="idlSuperclass"><a href="#idl-def-UIEventInit" class="idlType"><code>UIEventInit</code></a></span> {
+<span class="idlMember"> <span class="idlMemberType"><a>long</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-screenX">screenX</a></span> = <span class="idlMemberValue">0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>long</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-screenY">screenY</a></span> = <span class="idlMemberValue">0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>long</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-clientX">clientX</a></span> = <span class="idlMemberValue">0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>long</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-clientY">clientY</a></span> = <span class="idlMemberValue">0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-ctrlKey">ctrlKey</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-shiftKey">shiftKey</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-altKey">altKey</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-metaKey">metaKey</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>unsigned short</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-button">button</a></span> = <span class="idlMemberValue">0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>unsigned short</a></span> <span class="idlMemberName"><a href="#widl-MouseEventInit-buttons">buttons</a></span> = <span class="idlMemberValue">0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>EventTarget</a>?</span> <span class="idlMemberName"><a href="#widl-MouseEventInit-relatedTarget">relatedTarget</a></span> = <span class="idlMemberValue">null</span>;</span>
+};</span></pre><section id="dictionary-mouseeventinit-members"><h4><span class="secno">3.3.1 </span>Dictionary <a class="idlType" href="#idl-def-MouseEventInit"><code>MouseEventInit</code></a> Members</h4><dl class="dictionary-members"><dt id="widl-MouseEventInit-altKey"><code>altKey</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></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 id="widl-MouseEventInit-button"><code>button</code> of type <span class="idlMemberType"><a>unsigned short</a></span>, defaulting to <code>0</code></dt><dd>
+ Initializes the <code>button</code> attribute of the MouseEvent
+ object to a number representing one of the button(s) of the mouse
+ that is to be considered active.
+
+ <div class="note"><div class="note-title" role="heading" aria-level="4"><span>Note</span></div><p class=""><strong>Note: </strong>The value 0 is used to represent
+ the primary mouse button, 1 is used to represent the auxillery/
+ middle mouse button, and 2 to represent the right mouse button.
+ Numbers greater than 2 are also possible, but not well-defined
+ in DOM Level 3 Events [<cite><a class="bibref" href="#bib-DOM-LEVEL-3-EVENTS">DOM-LEVEL-3-EVENTS</a></cite>].
+ </p></div>
+ </dd><dt id="widl-MouseEventInit-buttons"><code>buttons</code> of type <span class="idlMemberType"><a>unsigned short</a></span>, defaulting to <code>0</code></dt><dd>
+ Initializes the <code>buttons</code> attribute of the MouseEvent
+ object to a number representing one <em>or more</em> of the button(s) of the mouse
+ that are to be considered active.
+
+ <div class="note"><div class="note-title" role="heading" aria-level="4"><span>Note</span></div><p class=""><strong>Note: </strong>The <code>buttons</code>
+ attribute is a bit-field. To apply a value according to the
+ definition in DOM Level 3 Events [<cite><a class="bibref" href="#bib-DOM-LEVEL-3-EVENTS">DOM-LEVEL-3-EVENTS</a></cite>], first, determine the
+ buttons that are to be considered active, then apply a bit-wise
+ OR operation the the result set. The value 1 is used to represent
+ the primary mouse button, 2 to represent the right mouse button,
+ and 4 to represent the auxillery/middle button. Numbers greater
+ than 4 are also possible and should be subsequent powers of 2 (8,
+ 16, etc.), but these additional values are not well-defined in DOM
+ Level 3 Events.
+ </p></div>
+
+<div class="example" id="example-3"><div class="example-title"><span>Example 3</span></div>
+<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>
+</div><!-- Initializing buttons -->
+ </dd><dt id="widl-MouseEventInit-clientX"><code>clientX</code> of type <span class="idlMemberType"><a>long</a></span>, defaulting to <code>0</code></dt><dd>See <code>clientY</code> (substituting "horizontal" for "vertical")</dd><dt id="widl-MouseEventInit-clientY"><code>clientY</code> of type <span class="idlMemberType"><a>long</a></span>, defaulting to <code>0</code></dt><dd>Initializes the <code>clientY</code> attribute of the MouseEvent
+ object to the desired vertical position of the mouse pointer
+ relative to the client window of the user's browser.
+
+ <p>Initializing the event object to the given mouse position must
+ not move the user's mouse pointer to the initialized position.
+ </p>
+
+ <div class="issue"><div class="issue-title" role="heading" aria-level="4"><span>Issue 1</span></div><p class=""><strong>Issue: </strong>Some user agents automatically
+ convert the values of clientX and clientY into other implementation-
+ specific mouse pointer position properties, such as: offsetX, offsetY,
+ pageX, pageY, x, and y.
+ </p></div>
+ </dd><dt id="widl-MouseEventInit-ctrlKey"><code>ctrlKey</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></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 id="widl-MouseEventInit-metaKey"><code>metaKey</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></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 id="widl-MouseEventInit-relatedTarget"><code>relatedTarget</code> of type <span class="idlMemberType"><a>EventTarget</a></span>, nullable, defaulting to <code>null</code></dt><dd>The <code>relatedTarget</code> should be initialized to the element
+ whose bounds the mouse pointer just left (in the case of a
+ <em>mouseover</em> or <em>mouseenter</em> event) or the element
+ whose bounds the mouse pointer is entering (in the case of a
+ <em>mouseout</em> or <em>mouseleave</em>
+ or <em>focusout</em> event). For other events, this value need not
+ be assigned (and will default to null).
+ </dd><dt id="widl-MouseEventInit-screenX"><code>screenX</code> of type <span class="idlMemberType"><a>long</a></span>, defaulting to <code>0</code></dt><dd>See <code>screenY</code> (substituting "horizontal" for "veritcal")</dd><dt id="widl-MouseEventInit-screenY"><code>screenY</code> of type <span class="idlMemberType"><a>long</a></span>, defaulting to <code>0</code></dt><dd>Initializes the <code>screenY</code> attribute of the MouseEvent
+ object to the desired vertical relative position of the mouse
+ pointer on the user's screen.
+
+ <p>Initializing the event object to the given mouse position must
+ not move the user's mouse pointer to the initialized position.
+ </p>
+ </dd><dt id="widl-MouseEventInit-shiftKey"><code>shiftKey</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></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></dl></section>
+ </section>
+
+ <section id="constructor-wheelevent" typeof="bibo:Chapter" resource="#constructor-wheelevent" >
+ <h3><span class="secno">3.4 </span><code>WheelEvent</code> Constructor</h3>
+
+ <pre class="idl"><span class="idlInterface" id="idl-def-WheelEvent">[<span class="extAttr">Constructor(DOMString typeArg, optional WheelEventInit wheelEventInitDict)</span>]
+partial interface <span class="idlInterfaceID">WheelEvent</span> {
+};</span></pre>
+
+ <pre class="idl"><span class="idlDictionary" id="idl-def-WheelEventInit">dictionary <span class="idlDictionaryID">WheelEventInit</span> {
+<span class="idlMember"> <span class="idlMemberType"><a>double</a></span> <span class="idlMemberName"><a href="#widl-WheelEventInit-deltaX">deltaX</a></span> = <span class="idlMemberValue">0.0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>double</a></span> <span class="idlMemberName"><a href="#widl-WheelEventInit-deltaY">deltaY</a></span> = <span class="idlMemberValue">0.0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>double</a></span> <span class="idlMemberName"><a href="#widl-WheelEventInit-deltaZ">deltaZ</a></span> = <span class="idlMemberValue">0.0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>unsigned long</a></span> <span class="idlMemberName"><a href="#widl-WheelEventInit-deltaMode">deltaMode</a></span> = <span class="idlMemberValue">0</span>;</span>
+};</span></pre><section id="dictionary-wheeleventinit-members"><h4><span class="secno">3.4.1 </span>Dictionary <a class="idlType" href="#idl-def-WheelEventInit"><code>WheelEventInit</code></a> Members</h4><dl class="dictionary-members"><dt id="widl-WheelEventInit-deltaMode"><code>deltaMode</code> of type <span class="idlMemberType"><a>unsigned long</a></span>, defaulting to <code>0</code></dt><dd>Initializes the <code>deltaMode</code> attribute on the WheelEvent
+ object to the enumerated values 0, 1, or 2, which represent the amount
+ of pixels scrolled (DOM_DELTA_PIXEL), lines scrolled (DOM_DELTA_LINE),
+ or pages scrolled (DOM_DELTA_PAGE) if the rotation of the wheel would
+ have resulted in scrolling.
+ </dd><dt id="widl-WheelEventInit-deltaX"><code>deltaX</code> of type <span class="idlMemberType"><a>double</a></span>, defaulting to <code>0.0</code></dt><dd>See <code>deltaZ</code> attribute.</dd><dt id="widl-WheelEventInit-deltaY"><code>deltaY</code> of type <span class="idlMemberType"><a>double</a></span>, defaulting to <code>0.0</code></dt><dd>See <code>deltaZ</code> attribute.</dd><dt id="widl-WheelEventInit-deltaZ"><code>deltaZ</code> of type <span class="idlMemberType"><a>double</a></span>, defaulting to <code>0.0</code></dt><dd>Initializes the <code>deltaZ</code> attribute of the WheelEvent object.
+ Relative positive values for this attribute (as well as the
+ <code>deltaX</code> and <code>deltaY</code> attributes) are given by
+ a right-hand coordinate system where the X, Y, and Z axes are
+ directed towards the right-most edge, bottom-most edge, and farthest
+ depth (away from the user) of the document, respectively. Negative
+ relative values are in the respective opposite directions.
+ </dd></dl></section>
+ </section>
+
+ <section id="constructor-keyboardevent" typeof="bibo:Chapter" resource="#constructor-keyboardevent" >
+ <h3><span class="secno">3.5 </span><code>KeyboardEvent</code> Constructor</h3>
+
+ <pre class="idl"><span class="idlInterface" id="idl-def-KeyboardEvent">[<span class="extAttr">Constructor(DOMString typeArg, optional KeyboardEventInit keyboardEventInitDict)</span>]
+partial interface <span class="idlInterfaceID">KeyboardEvent</span> {
+};</span></pre>
+
+ <pre class="idl"><span class="idlDictionary" id="idl-def-KeyboardEventInit">dictionary <span class="idlDictionaryID">KeyboardEventInit</span> : <span class="idlSuperclass"><a href="#idl-def-UIEventInit" class="idlType"><code>UIEventInit</code></a></span> {
+<span class="idlMember"> <span class="idlMemberType"><a>DOMString</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-char">char</a></span> = <span class="idlMemberValue">""</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>DOMString</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-key">key</a></span> = <span class="idlMemberValue">""</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>DOMString</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-code">code</a></span> = <span class="idlMemberValue">""</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>unsigned long</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-location">location</a></span> = <span class="idlMemberValue">0</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-ctrlKey">ctrlKey</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-shiftKey">shiftKey</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-altKey">altKey</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-metaKey">metaKey</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>boolean</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-repeat">repeat</a></span> = <span class="idlMemberValue">false</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>DOMString</a></span> <span class="idlMemberName"><a href="#widl-KeyboardEventInit-locale">locale</a></span> = <span class="idlMemberValue">""</span>;</span>
+};</span></pre><section id="dictionary-keyboardeventinit-members"><h4><span class="secno">3.5.1 </span>Dictionary <a class="idlType" href="#idl-def-KeyboardEventInit"><code>KeyboardEventInit</code></a> Members</h4><dl class="dictionary-members"><dt id="widl-KeyboardEventInit-altKey"><code>altKey</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></dt><dd>Initializes the <code>altKey</code> attribute of the KeyboardEvent
+ object to <code>true</code> if the <code>altKey</code> modifier
+ key is to be considered depressed, <code>false</code> otherwise.
+ </dd><dt id="widl-KeyboardEventInit-char"><code>char</code> of type <span class="idlMemberType"><a>DOMString</a></span>, defaulting to <code>""</code></dt><dd>Initializes the <code>char</code> attribute of the KeyboardEvent
+ object to the unicode character string representing a printable
+ character. If the related <code>key</code> value is not a printable
+ character, then this attribute should be assigned the empty string
+ (which is the default value).
+ </dd><dt id="widl-KeyboardEventInit-code"><code>code</code> of type <span class="idlMemberType"><a>DOMString</a></span>, defaulting to <code>""</code></dt><dd>Initializes the <code>code</code> attribute of the KeyboardEvent
+ object to the unicode character string representing the key that
+ was pressed, ignoring any keyboard modifications such as keyboard
+ layout.
+ This value should be one of the code values defined in the
+ <a href="#keyboard-events">Keyboard Events</a> section.
+ </dd><dt id="widl-KeyboardEventInit-ctrlKey"><code>ctrlKey</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></dt><dd>Initializes the <code>ctrlKey</code> attribute of the KeyboardEvent
+ object to <code>true</code> if the <code>ctrlKey</code> modifier
+ key is to be considered depressed, <code>false</code> otherwise.
+ </dd><dt id="widl-KeyboardEventInit-key"><code>key</code> of type <span class="idlMemberType"><a>DOMString</a></span>, defaulting to <code>""</code></dt><dd>Initializes the <code>key</code> attribute of the KeyboardEvent
+ object to the unicode character string representing the meaning of a
+ key after taking into account all keyboard modifications (such as
+ shift-state). This value is the final effective value of the key.
+ If the key is not a printable character, then it should be one of
+ the key values defined in [<cite><a class="bibref" href="#bib-DOM-LEVEL-3-EVENTS">DOM-LEVEL-3-EVENTS</a></cite>].
+ </dd><dt id="widl-KeyboardEventInit-locale"><code>locale</code> of type <span class="idlMemberType"><a>DOMString</a></span>, defaulting to <code>""</code></dt><dd>Initializes the <code>locale</code> attribute of the KeyboardEvent
+ object to a [<cite><a class="bibref" href="#bib-BCP47">BCP47</a></cite>] 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.
+ </dd><dt id="widl-KeyboardEventInit-location"><code>location</code> of type <span class="idlMemberType"><a>unsigned long</a></span>, defaulting to <code>0</code></dt><dd>
+ Initializes the <code>location</code> attribute of the KeyboardEvent
+ object to one of the following location numerical constants:
+ <ul>
+ <li><code>KeyboardEvent.DOM_KEY_LOCATION_STANDARD</code> (numerical value 0)</li>
+ <li><code>KeyboardEvent.DOM_KEY_LOCATION_LEFT</code> (numerical value 1)</li>
+ <li><code>KeyboardEvent.DOM_KEY_LOCATION_RIGHT</code> (numerical value 2)</li>
+ <li><code>KeyboardEvent.DOM_KEY_LOCATION_NUMPAD</code> (numerical value 3)</li>
+ <li><code>KeyboardEvent.DOM_KEY_LOCATION_MOBILE</code> (numerical value 4)</li>
+ <li><code>KeyboardEvent.DOM_KEY_LOCATION_JOYSTICK</code> (numerical value 5)</li>
+ </ul>
+ </dd><dt id="widl-KeyboardEventInit-metaKey"><code>metaKey</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></dt><dd>Initializes the <code>metaKey</code> attribute of the KeyboardEvent
+ object to <code>true</code> if the <code>metaKey</code> modifier
+ key is to be considered depressed, <code>false</code> otherwise.
+ </dd><dt id="widl-KeyboardEventInit-repeat"><code>repeat</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></dt><dd>Initializes the <code>repeat</code> attribute of the KeyboardEvent
+ object to <code>true</code> if the the current KeyboardEvent is
+ considered part of a repeating sequence of similar events caused
+ by the long depression of any single key, <code>false</code> otherwise.
+ </dd><dt id="widl-KeyboardEventInit-shiftKey"><code>shiftKey</code> of type <span class="idlMemberType"><a>boolean</a></span>, defaulting to <code>false</code></dt><dd>Initializes the <code>shiftKey</code> attribute of the KeyboardEvent
+ object to <code>true</code> if the <code>shiftKey</code> modifier
+ key is to be considered depressed, <code>false</code> otherwise.
+ </dd></dl></section>
+ </section>
+
+ <section id="constructor-compositionevent" typeof="bibo:Chapter" resource="#constructor-compositionevent" >
+ <h3><span class="secno">3.6 </span><code>CompositionEvent</code> Constructor</h3>
+
+ <pre class="idl"><span class="idlInterface" id="idl-def-CompositionEvent">[<span class="extAttr">Constructor(DOMString typeArg, optional CompositionEventInit compositionEventInitDict)</span>]
+partial interface <span class="idlInterfaceID">CompositionEvent</span> {
+};</span></pre>
+
+ <pre class="idl"><span class="idlDictionary" id="idl-def-CompositionEventInit">dictionary <span class="idlDictionaryID">CompositionEventInit</span> : <span class="idlSuperclass"><a href="#idl-def-UIEventInit" class="idlType"><code>UIEventInit</code></a></span> {
+<span class="idlMember"> <span class="idlMemberType"><a>DOMString</a>?</span> <span class="idlMemberName"><a href="#widl-CompositionEventInit-data">data</a></span> = <span class="idlMemberValue">""</span>;</span>
+<span class="idlMember"> <span class="idlMemberType"><a>DOMString</a></span> <span class="idlMemberName"><a href="#widl-CompositionEventInit-locale">locale</a></span> = <span class="idlMemberValue">""</span>;</span>
+};</span></pre><section id="dictionary-compositioneventinit-members"><h4><span class="secno">3.6.1 </span>Dictionary <a class="idlType" href="#idl-def-CompositionEventInit"><code>CompositionEventInit</code></a> Members</h4><dl class="dictionary-members"><dt id="widl-CompositionEventInit-data"><code>data</code> of type <span class="idlMemberType"><a>DOMString</a></span>, nullable, defaulting to <code>""</code></dt><dd>Initializes the <code>data</code> attribute of the CompositionEvent
+ object to the characters generated by the IME composition.
+ </dd><dt id="widl-CompositionEventInit-locale"><code>locale</code> of type <span class="idlMemberType"><a>DOMString</a></span>, defaulting to <code>""</code></dt><dd>Initializes the <code>locale</code> attribute of the CompositionEvent
+ object to a [<cite><a class="bibref" href="#bib-BCP47">BCP47</a></cite>] 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.
+ </dd></dl></section>
+ </section>
+ </section>
+
+ <section id="keyboard-events" typeof="bibo:Chapter" resource="#keyboard-events" >
+ <!--OddPage--><h2><span class="secno">4. </span>Keyboard Events</h2>
+ <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
+ (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" typeof="bibo:Chapter" resource="#keyboard-event-interface" >
+ <h3><span class="secno">4.1 </span>Interface <code>KeyboardEvent</code></h3>
+
+ <pre class="idl"><span class="idlInterface" id="idl-def-KeyboardEvent-1">partial interface <span class="idlInterfaceID">KeyboardEvent</span> : <span class="idlSuperclass"><a href="#idl-def-UIEvent" class="idlType"><code>UIEvent</code></a></span> {
+<span class="idlAttribute"> readonly attribute <span class="idlAttrType"><a>DOMString</a></span> <span class="idlAttrName"><a href="#widl-KeyboardEvent-code">code</a></span>;</span>
+<span class="idlMethod"> static <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-KeyboardEvent-queryKeyCap-DOMString-DOMString-code-DOMString-locale">queryKeyCap</a></span> (<span class="idlParam"><span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">code</span></span>, <span class="idlParam">optional <span class="idlParamType"><a>DOMString</a></span> <span class="idlParamName">locale</span></span>);</span>
+<span class="idlMethod"> static <span class="idlMethType"><a>DOMString</a></span> <span class="idlMethName"><a href="#widl-KeyboardEvent-queryLocale-DOMString">queryLocale</a></span> ();</span>
+};</span></pre><section id="attributes"><h4><span class="secno">4.1.1 </span>Attributes</h4><dl class="attributes"><dt id="widl-KeyboardEvent-code"><code>code</code> of type <span class="idlAttrType"><a>DOMString</a></span>, readonly </dt><dd>
+ <p><code>code</code> holds a string that identifies the physical key being pressed.
+ The value is not affected by the current keyboard layout or modifier state, so a particular
+ key will always return the same value.
+ </p>
+ <p>The un-initialized value of this attribute must be "" (the empty string).</p>
+ </dd></dl></section><section id="methods"><h4><span class="secno">4.1.2 </span>Methods</h4><dl class="methods"><dt id="widl-KeyboardEvent-queryKeyCap-DOMString-DOMString-code-DOMString-locale"><code>queryKeyCap</code>, static</dt><dd>
+ <p>Given a <code>code</code> corresponding to a key on a standard keyboard and a [<cite><a class="bibref" href="#bib-BCP47">BCP47</a></cite>] <code>locale</code>,
+ the <code>queryKeyCap</code> method returns the character that would be generated if that key were
+ 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 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>.
+ </p>
+
+ <table class="parameters"><tr><th>Parameter</th><th>Type</th><th>Nullable</th><th>Optional</th><th>Description</th></tr><tr><td class="prmName">code</td><td class="prmType"><code><a>DOMString</a></code></td><td class="prmNullFalse">✘</td><td class="prmOptFalse">✘</td><td class="prmDesc">The code for the key, as defined in the <a href="#key-codes">Key Codes</a> section below.
+ </td></tr><tr><td class="prmName">locale</td><td class="prmType"><code><a>DOMString</a></code></td><td class="prmNullFalse">✘</td><td class="prmOptTrue">✔</td><td class="prmDesc">
+ <p>If specified, this should be a [<cite><a class="bibref" href="#bib-BCP47">BCP47</a></cite>] tag (like 'en-US') that identifies the
+ keyboard layout in which to interpret the <code>code</code> parameter.<br>
+ If not specified, then the <code>code</code>
+ value is interpreted in the context of the 'en-US' locale.</p>
+ </td></tr></table><div><em>Return type: </em><code><a>DOMString</a></code></div></dd><dt id="widl-KeyboardEvent-queryLocale-DOMString"><code>queryLocale</code>, static</dt><dd>
+ <p>Returns the current keyboard locale as a [<cite><a class="bibref" href="#bib-BCP47">BCP47</a></cite>] 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>
+ <div><em>No parameters.</em></div><div><em>Return type: </em><code><a>DOMString</a></code></div></dd></dl></section>
+
+<div class="example" id="example-4"><div class="example-title"><span>Example 4</span></div>
+<p class="example-title">Calling <code>queryKeycap</code> for various keys </p>
+<pre class="example">
+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>
+</pre>
+
+<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>
+</div>
+
+<div class="example" id="example-5"><div class="example-title"><span>Example 5</span></div>
+<p class="example-title">Getting the current keycap for <code class="key-code">'KeyA'</code> </p>
+<pre class="example">
+queryKeyCap('KeyA', queryLocale())
+</pre></div>
+ </section>
+
+ <section id="key-codes" typeof="bibo:Chapter" resource="#key-codes" >
+ <h3><span class="secno">4.2 </span>Key codes</h3>
+ <p>A key <code>code</code> is an attribute of a keyboard event that can be used to identify the physical
+ key associated with the keyboard event. It is similar to USB Usage IDs [***REF***] in that it provides
+ a low-level value (similar to a scancode) that is vendor-neutral.
+ </p>
+ <p>The primary purpose of the <code>code</code> attribute is to provide a consistent and coherent way
+ to identify keys based on their physical location. In addition, it also provides a stable name
+ (unaffected by the current keyboard state) that uniquely identifies each key on the keyboard.
+ </p>
+
+ <section id="key-event-motivation" typeof="bibo:Chapter" resource="#key-event-motivation" >
+ <h4><span class="secno">4.2.1 </span>Motivation for Adding the <code>code</code> Attribute</h4>
+ <p>As discussed in more detail later in this document, the standard PC keyboard has a set of keys (which
+ we refer to as <em><a href="#key-alphanumeric-writing-system">writing system keys</a></em>)
+ that generate different <code>char</code> and <code>key</code> values
+ based on the current keyboard layout selected by the user.
+ This situation makes it difficult to write code that detects keys based on their physical
+ location since the code would need to know which layout is in effect in order to know which
+ <code>char</code> or <code>key</code> values to check for. A real-world example of this is
+ a game that wants to use the
+ <code class="keycap">'W'</code>, <code class="keycap">'A'</code>, <code class="keycap">'S'</code> and <code class="keycap">'D'</code>
+ keys to control player movement.
+ The <code>code</code> attribute solves this problem by providing
+ a stable value to check that is <em>not affected by the current keyboard layout</em>.
+ </p>
+ <p>In addition, the values in the <code>char</code> and <code>key</code> attributes depend as well
+ on the current keyboard state. Because of this, the order in which keys are pressed and released
+ in relation to modifier keys
+ can affect the values stored in the <code>char</code> and <code>key</code> attributes.
+ The <code>code</code> attribute solves this problem by providing
+ a stable value that is <em>not affected by the current keyboard state</em>.
+ </p>
+ </section>
+
+ <section id="key-event-attributes" typeof="bibo:Chapter" resource="#key-event-attributes" >
+ <h4><span class="secno">4.2.2 </span>The Relationship Between <code>char</code>, <code>key</code> and <code>code</code></h4>
+ <dl>
+ <dt><code>char</code></dt>
+ <dd>The <code>char</code> attribute is intended for users who are interested only in the printable final character
+ that the user typed (or entered through some other means).
+ Example use case: Detecting character input (e.g., to validate the contents of a textbox after each character is entered).
+ </dd>
+ <dt><code>key</code></dt>
+ <dd>The <code>key</code> attribute is intended for users who are interested in the meaning of the key
+ bring pressed, taking into account the current keyboard layout (and IME and dead keys).
+ Example use case: Detecting modified keys or bare modifier keys (e.g., to perform an action in response to a keyboard shortcut).
+ </dd>
+ <dt><code>code</code></dt>
+ <dd>The <code>code</code> attribute is intended for users who are interested in the key that was pressed
+ by the user, without any layout modifications applied.
+ Example use case: Detecting WASD keys (e.g., for movement controls in a game) or trapping all keys
+ (e.g., in a remote desktop client to send all keys to the remote host).
+ </dd>
+ </dl>
+
+ </section>
+
+<div class="example" id="example-6"><div class="example-title"><span>Example 6</span></div>
+<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_LEFT</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_RIGHT</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, in the French example, the <code class="key-code">'Alt'</code> and
+ <code class="key-code">'AltGr'</code> keys retain their left and right location, even through there
+ is only one of each key.
+</p>
+</div><!-- Handling Left and Right Alt Keys -->
+
+<div class="example" id="example-7"><div class="example-title"><span>Example 7</span></div>
+<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>
+</div><!-- Handling the Single Quote Key -->
+
+<div class="example" id="example-8"><div class="example-title"><span>Example 8</span></div>
+<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>
+</div><!-- Handling the 2 Key -->
+
+<div class="example" id="example-9"><div class="example-title"><span>Example 9</span></div>
+<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>
+</div><!-- Sequence of Keyboard Events: Shift and 2 -->
+
+ </section>
+
+ <section id="keyboards" typeof="bibo:Chapter" resource="#keyboards" >
+ <h3><span class="secno">4.3 </span>Keyboards</h3>
+ <p>Alphanumeric keyboards are the most common way for users to generate keyboard events, but properly
+ detecting key events can be tricky because the OS may change the behavior of certain keys based on
+ the current keyboard layout selected by the user.
+ </p>
+ <p>This section provides an overview of standard keyboards and describes the <code>code</code>
+ attribute associated with each key.
+ </p>
+
+ <section id="keyboard-sections" typeof="bibo:Chapter" resource="#keyboard-sections" >
+ <h4><span class="secno">4.3.1 </span>Keyboard Sections</h4>
+ <p><em>This section is informative</em></p>
+ <p>When discussing keyboard layouts, it is convenient to divide the standard keyboard into distinct sections
+ and to label each row.
+ </p>
+ <figure id="fig-the-five-general-sections-of-a-standard-keyboard."><object class="figure" data="keyboard-sections.svg" type="image/svg+xml" width="684" height="225" title="The five general sections of a standard keyboard."></object><figcaption>Fig. <span class="figno">1</span> <span class="fig-title">The five general sections of a standard keyboard.</span></figcaption></figure>
+ <p>The Alphanumeric section is the main part of the keyboard and is where most of the keyboard variation occurs.
+ When a user selects a keyboard layout, it is the keys in this sections that are most affected.
+ </p>
+ <p>The Control Pad and Arrow Pad sections contain the arrow keys and other editing keys.
+ </p>
+ <p>The Numpad (also known as the "numeric keypad" or "number pad") contains number and math keys to make it
+ easier to enter numeric data.
+ </p>
+ <p>And finally, the Function section contains miscellaneous function keys and special keys like Escape.
+ </p>
+ <p>To make it easier to identify keys, the rows on the keyboard are named starting with "A"
+ for the bottom row up to "E" for the top row. The row of keys in the Function section are considered
+ to be in row "K".
+ These row names are consistent with those given in the ISO/IEC 9995-1 specification.
+ </p>
+ <p>Note that many keyboards (both modern and legacy) have extra keys that do not fit neatly into the above sections.
+ Some of these keys are covered in the <a href="#key-media">Media Keys</a> section.
+ Keys not covered in this document should be handled in the same manner as described in the
+ <a href="#other-devices">Other Devices</a> section.
+ </p>
+ </section><!-- keyboard-sections -->
+
+ <section id="keyboard-common-layouts" typeof="bibo:Chapter" resource="#keyboard-common-layouts" >
+ <h4><span class="secno">4.3.2 </span>Standard Keyboard Layouts</h4>
+ <p><em>This section is informative</em></p>
+ <p>This section describes the physical layouts found on commonly available keyboards.
+ </p>
+
+ <section id="keyboard-101" typeof="bibo:Chapter" resource="#keyboard-101" >
+ <h5><span class="secno">4.3.2.1 </span>Standard "101" Keyboard Layout</h5>
+ <p>The standard "101" keyboard (commonly referred to as the "US layout") is the only layout that uses the <code class="key-code">'Backslash'</code> code.
+ All the other layouts omit this key and expand the <code class="key-code">'Enter'</code> key to occupy
+ two-rows.
+ </p>
+ <figure id="fig-standard-101-keyboard-layout-showing-unmodified-us-key-values."><object class="figure" data="keyboard-101-us.svg" type="image/svg+xml" width="684" height="225" title="Standard '101' keyboard layout showing unmodified US key values."></object><figcaption>Fig. <span class="figno">2</span> <span class="fig-title">Standard '101' keyboard layout showing unmodified US key values.</span></figcaption></figure>
+ <p>Modern standard "101"-layout keyboards actually contain 104 keys: 61 keys in the alphanumeric section
+ and 43 keys in the numpad, control pad, arrow pad and function sections.
+ The "101" name for this keyboard layout dates to the time when this standard keyboard did in fact contain
+ 101 keys. The two <code class="glyph">'OS'</code> keys,
+ and the <code class="glyph">'Menu'</code> key were
+ added later to bring the total to 104 keys.
+ </p>
+ </section>
+
+ <section id="keyboard-101alt" typeof="bibo:Chapter" resource="#keyboard-101alt" >
+ <h5><span class="secno">4.3.2.2 </span>Alternate "101" Keyboard Layout</h5>
+ <p>The alternate "101" keyboard removes the <code class="key-code">'Backslash'</code> key to create a
+ large <code class="key-code">'Enter'</code> key and shrinks the <code class="key-code">'Backspace'</code>
+ key to make room for the <code class="key-code">'IntlYen'</code> key (The <code class="key-code">'IntlYen'</code> name comes from the
+ Japanese layout — in the Russian layout shown above this key maps to a <code class="glyph">'\'</code>.
+ </p>
+ <figure id="fig-alternate-101-keyboard-layout-showing-unmodified-russian-key-values."><object class="figure" data="keyboard-101-russian.svg" type="image/svg+xml" width="684" height="225" title="Alternate '101' keyboard layout showing unmodified Russian key values."></object><figcaption>Fig. <span class="figno">3</span> <span class="fig-title">Alternate '101' keyboard layout showing unmodified Russian key values.</span></figcaption></figure>
+ <p>Modern alternate "101"-layout keyboards contain 104 keys: 61 keys in the alphanumeric section and 43 keys in the numpad,
+ control pad, arrow pad and function sections.
+ </p>
+ </section>
+
+ <section id="keyboard-102" typeof="bibo:Chapter" resource="#keyboard-102" >
+ <h5><span class="secno">4.3.2.3 </span>Standard "102" Keyboard Layout</h5>
+ <p>The standard "102" keyboard is common throughout Europe and adds two keys that don't exist on the
+ "101" layouts:
+ The <code class="key-code">'IntlBackslash'</code> key next to the left shift key,
+ and the <code class="key-code">'IntlHash'</code> key which is partially tucked under the
+ <code class="key-code">'Enter'</code> key.
+ </p>
+ <figure id="fig-standard-102-keyboard-layout-showing-unmodified-french-key-values."><object class="figure" data="keyboard-102-uk.svg" type="image/svg+xml" width="684" height="225" title="Standard '102' keyboard layout showing unmodified French key values."></object><figcaption>Fig. <span class="figno">4</span> <span class="fig-title">Standard '102' keyboard layout showing unmodified French key values.</span></figcaption></figure>
+ <p>Modern "102"-layout keyboards contain 105 keys: 62 keys in the alphanumeric section and 43 keys in the numpad,
+ control pad, arrow pad and function sections.
+ </p>
+ </section>
+
+ <section id="keyboard-103" typeof="bibo:Chapter" resource="#keyboard-103" >
+ <h5><span class="secno">4.3.2.4 </span>Korean "103" Keyboard Layout</h5>
+ <p>The Korean "103" keyboard is based on the alternate 101 layout and adds two additional keys
+ (one on each side of the spacebar) to handle Korean-specific input modes.
+ These keys are
+ <code class="key-code">'Hanja'</code> (labelled <code class="keycap">한자</code> <span class="phonetic">hanja</span>) and
+ <code class="key-code">'HangulMode'</code> (labelled <code class="keycap">한/영</code> <span class="phonetic">han/yeong</span>).
+ </p>
+ <figure id="fig-korean-103-keyboard-layout-showing-unmodified-korean-key-values."><object class="figure" data="keyboard-103-korean.svg" type="image/svg+xml" width="684" height="225" title="Korean '103' keyboard layout showing unmodified Korean key values."></object><figcaption>Fig. <span class="figno">5</span> <span class="fig-title">Korean '103' keyboard layout showing unmodified Korean key values.</span></figcaption></figure>
+ <p>Modern "103"-layout keyboards contain 106 keys: 63 keys in the alphanumeric section and 43 keys in the numpad,
+ control pad, arrow pad and function sections.
+ </p>
+ </section>
+
+ <section id="keyboard-104" typeof="bibo:Chapter" resource="#keyboard-104" >
+ <h5><span class="secno">4.3.2.5 </span>Brazilian "104" Keyboard Layout</h5>
+ <p>The "104" layout used in Brazil adds 4 new keys: the two non-US keys from the "102" layout
+ (<code class="key-code">'IntlHash'</code> and <code class="key-code">'IntlBackslash'</code>)
+ plus the <code class="key-code">'IntlRo'</code> key (next to the right shift
+ key) and an extra key on the numeric keypad. This new keypad key is called
+ <code class="key-code">'KeypadComma'</code> because it represents the thousands separator. On the
+ Brazilian key layout, this key has a keycap of <code class="keycap">.</code> and the <code class="key-code">'KeypadPeriod'</code>
+ key has a keycap of <code class="keycap">,</code>.
+ </p>
+ <figure id="fig-standard-104-keyboard-layout-showing-unmodified-brazilian-key-values."><object class="figure" data="keyboard-104-brazilian.svg" type="image/svg+xml" width="684" height="225" title="Standard '104' keyboard layout showing unmodified Brazilian key values."></object><figcaption>Fig. <span class="figno">6</span> <span class="fig-title">Standard '104' keyboard layout showing unmodified Brazilian key values.</span></figcaption></figure>
+ <p>Modern "104"-layout keyboards contain 107 keys: 63 keys in the alphanumeric section and 44 keys in the numpad,
+ control pad, arrow pad and function sections. Some Brazilian keyboards lack the extra keypad
+ key and have only 106 keys.
+ </p>
+ </section>
+
+ <section id="keyboard-106" typeof="bibo:Chapter" resource="#keyboard-106" >
+ <h5><span class="secno">4.3.2.6 </span>Japanese "106" Keyboard Layout</h5>
+ <p>The Japanese "106" keyboard layout adds 3 new keys:
+ <code class="key-code">'IntlYen'</code>,
+ <code class="key-code">'IntlHash'</code> and
+ <code class="key-code">'IntlRo'</code>.
+ It also shrinks the <code class="key-code">'Space'</code> key to make room for 3 input mode keys:
+ <code class="key-code">'NoConvert'</code> (labelled <code class="keycap">無変換</code> <span class="phonetic">muhenkan</span>),
+ <code class="key-code">'Convert'</code> (labelled <code class="keycap">変換</code> <span class="phonetic">henkan</span>),
+ <code class="key-code">'KanaMode'</code> (labelled <code class="keycap">カタカナ/ひらがな/ローマ字</code> <span class="phonetic">katakana/hiragana/romaji</span>).
+ </p>
+ <figure id="fig-standard-106-keyboard-layout-showing-unmodified-japanese-key-values."><object class="figure" data="keyboard-106-japanese.svg" type="image/svg+xml" width="684" height="225" title="Standard '106' keyboard layout showing unmodified Japanese key values."></object><figcaption>Fig. <span class="figno">7</span> <span class="fig-title">Standard '106' keyboard layout showing unmodified Japanese key values.</span></figcaption></figure>
+ <p>Modern "106"-layout keyboards contain 109 keys: 66 keys in the alphanumeric section and 43 keys in the numpad,
+ control pad, arrow pad and function sections.
+ </p>
+ </section>
+
+ <section id="keyboard-mac" typeof="bibo:Chapter" resource="#keyboard-mac" >
+ <h5><span class="secno">4.3.2.7 </span>Apple Keyboard Layout</h5>
+ <p>In general, Apple keyboards follow the same layout as PC keyboards, but there are some differences as
+ noted in the following figure.
+ </p>
+ <figure id="fig-apple-extended-keyboard-layout-showing-unmodified-english-key-values."><object class="figure" data="keyboard-mac.svg" type="image/svg+xml" width="684" height="225" title="Apple extended keyboard layout showing unmodified English key values."></object><figcaption>Fig. <span class="figno">8</span> <span class="fig-title">Apple extended keyboard layout showing unmodified English key values.</span></figcaption></figure>
+ <p>In this figure, the green keys are those
+ that have been moved to a new location while the blue keys indicate keys that have been added.
+ </p>
+ </section>
+
+ <section id="keyboard-laptops" typeof="bibo:Chapter" resource="#keyboard-laptops" >
+ <h5><span class="secno">4.3.2.8 </span>Laptop Keyboard Layouts</h5>
+ <p>The limited space available on laptop keyboards often means that the physical key layout needs
+ to be adjusted to fit all the required keys. The writing system keys in the Alphanumeric section tend
+ to remain intact, but the other keyboard sections are usually combined with other keys or
+ removed altogether.
+ </p>
+ <figure id="fig-apple-laptop-keyboard-layout."><object class="figure" data="keyboard-laptop-mac.svg" type="image/svg+xml" width="420" height="180" title="Apple laptop keyboard layout."></object><figcaption>Fig. <span class="figno">9</span> <span class="fig-title">Apple laptop keyboard layout.</span></figcaption></figure>
+ <p>In this Apple laptop keyboard, the right control key has been removed to make room for half-height
+ arrow keys and a <code class="key-code">'Fn'</code> key is added on the left.
+ </p>
+ <figure id="fig-sample-pc-laptop-keyboard-layout."><object class="figure" data="keyboard-laptop.svg" type="image/svg+xml" width="460" height="180" title="Sample PC laptop keyboard layout."></object><figcaption>Fig. <span class="figno">10</span> <span class="fig-title">Sample PC laptop keyboard layout.</span></figcaption></figure>
+ <p>PC laptop keyboards vary considerably, but this sample keyboard demonstrates some commonly found aspects.
+ The control pad keys are added along the right-hand side with the arrow keys tucked in along the bottom.
+ The right shift key is often shrunk to make room for the up arrow key and the right OS key
+ is typically removed altogether.
+ </p></section>
+
+ </section><!-- keyboard-common-layouts -->
+
+ <section id="keyboard-key-codes" typeof="bibo:Chapter" resource="#keyboard-key-codes" >
+ <h4><span class="secno">4.3.3 </span>Key Codes for Standard Keyboards</h4>
+ <p>This section describes the various keyboard sections in more detail and defines the <code>code</code>
+ values that should be used for each key.
+ </p>
+
+ <section id="key-alphanumeric-section" typeof="bibo:Chapter" resource="#key-alphanumeric-section" >
+ <h5><span class="secno">4.3.3.1 </span>Alphanumeric Section</h5>
+ <p>The Alphanumeric section keys fall into two general categories: "writing system" keys whose meaning changes based on
+ the current keyboard layout, and "functional" keys which are (mostly) the same for all layouts.
+ </p>
+ <section id="key-alphanumeric-writing-system" typeof="bibo:Chapter" resource="#key-alphanumeric-writing-system" >
+ <h6>Writing System Keys</h6>
+ <p>The "writing system" keys are those that change meaning based on the current keyboard layout.
+ </p>
+ <figure id="fig-the-writing-system-keys-in-the-alphanumeric-section."><object class="figure" data="keyboard-codes-alphanum1.svg" type="image/svg+xml" width="653" height="225" title="The writing system keys in the alphanumeric section."></object><figcaption>Fig. <span class="figno">11</span> <span class="fig-title">The writing system keys in the alphanumeric section.</span></figcaption></figure>
+ <p>This figure shows a hypothetical keyboard that combines all the writing system keys (shown in
+ blue and green) found on the various keyboards.
+ Blue keys are present on all standard keyboards while green keys are only available on some keyboards.
+ </p>
+ <p>The name shown on each key is the <code>code</code> assigned to that key.
+ Wherever possible, the <code>code</code> names are based on the name for the US key
+ in that position (i.e., they are based on the US keyboard layout). For keys that don't
+ exist on the US keyboard, names from the UK or Japanese layouts are used instead.
+ </p>
+ <table id="table-key-code-alphanumeric-writing-system" class="data-table full-width">
+ <caption>List of code values for writing system keys in the Alphanumeric section.</caption>
+ <thead><tr><th>Code Value</th><th>USB Usage ID<br>Page 0x07<br>(Informative)</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-BackQuote" class="key-code">'BackQuote'</code></td>
+ <td>0x35</td><td><code class="keycap">`</code> and <code class="keycap">~</code> on a US keyboard. This is the <code class="keycap">半角/全角/漢字</code> (<span class="phonetic">hankaku/zenkaku/kanji</span>) key on Japanese keyboards</td></tr>
+ <tr><td><code id="code-Backslash" class="key-code">'Backslash'</code></td>
+ <td>0x31</td><td><code class="keycap">\</code> and <code class="keycap">|</code> on a US keyboard. Found only on standard 101-key layouts.</td></tr>
+ <tr><td><code id="code-Backspace" class="key-code">'Backspace'</code></td>
+ <td>0x2a</td><td>Labelled <code class="keycap">Delete</code> on Macintosh keyboards.</td></tr>
+ <tr><td><code id="code-BracketLeft" class="key-code">'BracketLeft'</code></td>
+ <td>0x2f</td><td><code class="keycap">[</code> and <code class="keycap">{</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-BracketRight" class="key-code">'BracketRight'</code></td>
+ <td>0x30</td><td><code class="keycap">]</code> and <code class="keycap">}</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Comma" class="key-code">'Comma'</code></td>
+ <td>0x36</td><td><code class="keycap">,</code> and <code class="keycap"><</code> on a US keyboard.</td></tr>
+
+ <tr><td><code id="code-Digit-0" class="key-code">'Digit0'</code></td>
+ <td>0x27</td><td><code class="keycap">0</code> and <code class="keycap">)</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-1" class="key-code">'Digit1'</code></td>
+ <td>0x1e</td><td><code class="keycap">1</code> and <code class="keycap">!</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-2" class="key-code">'Digit2'</code></td>
+ <td>0x1f</td><td><code class="keycap">2</code> and <code class="keycap">@</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-3" class="key-code">'Digit3'</code></td>
+ <td>0x20</td><td><code class="keycap">3</code> and <code class="keycap">#</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-4" class="key-code">'Digit4'</code></td>
+ <td>0x21</td><td><code class="keycap">4</code> and <code class="keycap">$</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-5" class="key-code">'Digit5'</code></td>
+ <td>0x22</td><td><code class="keycap">5</code> and <code class="keycap">%</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-6" class="key-code">'Digit6'</code></td>
+ <td>0x23</td><td><code class="keycap">6</code> and <code class="keycap">^</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-7" class="key-code">'Digit7'</code></td>
+ <td>0x24</td><td><code class="keycap">7</code> and <code class="keycap">&</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-8" class="key-code">'Digit8'</code></td>
+ <td>0x25</td><td><code class="keycap">8</code> and <code class="keycap">*</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Digit-9" class="key-code">'Digit9'</code></td>
+ <td>0x26</td><td><code class="keycap">9</code> and <code class="keycap">(</code> on a US keyboard.</td></tr>
+
+ <tr><td><code id="code-Equal" class="key-code">'Equal'</code></td>
+ <td>0x2e</td><td><code class="keycap">=</code> and <code class="keycap">+</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-IntlBackslash" class="key-code">'IntlBackslash'</code></td>
+ <td>0x64</td><td>Located between the <code class="key-code">'ShiftLeft'</code> and <code class="key-code">'KeyZ'</code> keys. The <code class="keycap">\</code> and <code class="keycap">|</code> key on a UK keyboard.</td></tr>
+ <tr><td><code id="code-IntlHash" class="key-code">'IntlHash'</code></td>
+ <td>0x32</td><td>Located between the <code class="key-code">'Quote'</code> and <code class="key-code">'Enter'</code> keys on row E of the keyboard. The <code class="keycap">#</code> and <code class="keycap">~</code> key on a UK keyboard.</td></tr>
+ <tr><td><code id="code-IntlRo" class="key-code">'IntlRo'</code></td>
+ <td>0x87</td><td>Located between the <code class="key-code">'Slash'</code> and <code class="key-code">'ShiftRight'</code> keys. The <code class="keycap">\</code> and <code class="keycap">ろ</code> (<span class="phonetic">ro</span>) key on a Japanese keyboard.</td></tr>
+ <tr><td><code id="code-IntlYen" class="key-code">'IntlYen'</code></td>
+ <td>0x89</td><td>Located between the <code class="key-code">'Equal'</code> and <code class="key-code">'Backspace'</code> keys. The <code class="keycap">¥</code> (<span class="phonetic">yen</span>) key on a Japanese keyboard. The <code class="keycap">\</code> and <code class="keycap">/</code> key on a Russian keyboard.</td></tr>
+
+ <tr><td><code id="code-KeyA" class="key-code">'KeyA'</code></td>
+ <td>0x04</td><td><code class="keycap">a</code> on a US keyboard. Labelled <code class="keycap">q</code> on an AZERTY (e.g., French) keyboard.</td></tr>
+ <tr><td><code id="code-KeyB" class="key-code">'KeyB'</code></td>
+ <td>0x05</td><td><code class="keycap">b</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyC" class="key-code">'KeyC'</code></td>
+ <td>0x06</td><td><code class="keycap">c</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyD" class="key-code">'KeyD'</code></td>
+ <td>0x07</td><td><code class="keycap">d</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyE" class="key-code">'KeyE'</code></td>
+ <td>0x08</td><td><code class="keycap">e</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyF" class="key-code">'KeyF'</code></td>
+ <td>0x09</td><td><code class="keycap">f</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyG" class="key-code">'KeyG'</code></td>
+ <td>0x0a</td><td><code class="keycap">g</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyH" class="key-code">'KeyH'</code></td>
+ <td>0x0b</td><td><code class="keycap">h</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyI" class="key-code">'KeyI'</code></td>
+ <td>0x0c</td><td><code class="keycap">i</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyJ" class="key-code">'KeyJ'</code></td>
+ <td>0x0d</td><td><code class="keycap">j</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyK" class="key-code">'KeyK'</code></td>
+ <td>0x0e</td><td><code class="keycap">k</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyL" class="key-code">'KeyL'</code></td>
+ <td>0x0f</td><td><code class="keycap">l</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyM" class="key-code">'KeyM'</code></td>
+ <td>0x10</td><td><code class="keycap">m</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyN" class="key-code">'KeyN'</code></td>
+ <td>0x11</td><td><code class="keycap">n</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyO" class="key-code">'KeyO'</code></td>
+ <td>0x12</td><td><code class="keycap">o</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyP" class="key-code">'KeyP'</code></td>
+ <td>0x13</td><td><code class="keycap">p</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyQ" class="key-code">'KeyQ'</code></td>
+ <td>0x14</td><td><code class="keycap">q</code> on a US keyboard. Labelled <code class="keycap">a</code> on an AZERTY (e.g., French) keyboard.</td></tr>
+ <tr><td><code id="code-KeyR" class="key-code">'KeyR'</code></td>
+ <td>0x15</td><td><code class="keycap">r</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyS" class="key-code">'KeyS'</code></td>
+ <td>0x16</td><td><code class="keycap">s</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyT" class="key-code">'KeyT'</code></td>
+ <td>0x17</td><td><code class="keycap">t</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyU" class="key-code">'KeyU'</code></td>
+ <td>0x18</td><td><code class="keycap">u</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyV" class="key-code">'KeyV'</code></td>
+ <td>0x19</td><td><code class="keycap">v</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyW" class="key-code">'KeyW'</code></td>
+ <td>0x1a</td><td><code class="keycap">w</code> on a US keyboard. Labelled <code class="keycap">z</code> on an AZERTY (e.g., French) keyboard.</td></tr>
+ <tr><td><code id="code-KeyX" class="key-code">'KeyX'</code></td>
+ <td>0x1b</td><td><code class="keycap">x</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-KeyY" class="key-code">'KeyY'</code></td>
+ <td>0x1c</td><td><code class="keycap">y</code> on a US keyboard. Labelled <code class="keycap">z</code> on a QWERTZ (e.g., German) keyboard.</td></tr>
+ <tr><td><code id="code-KeyZ" class="key-code">'KeyZ'</code></td>
+ <td>0x1d</td><td><code class="keycap">z</code> on a US keyboard. Labelled <code class="keycap">w</code> on an AZERTY (e.g., French) keyboard, and <code class="keycap">y</code> on a QWERTZ (e.g., German) keyboard.</td></tr>
+
+ <tr><td><code id="code-Minus" class="key-code">'Minus'</code></td>
+ <td>0x2d</td><td><code class="keycap">-</code> and <code class="keycap">_</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Period" class="key-code">'Period'</code></td>
+ <td>0x37</td><td><code class="keycap">.</code> and <code class="keycap">></code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Quote" class="key-code">'Quote'</code></td>
+ <td>0x34</td><td><code class="keycap">'</code> and <code class="keycap">"</code> on a US keyboard.</td></tr>
+ <tr><td><code id="code-Semicolon" class="key-code">'Semicolon'</code></td>
+ <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>
+ </tbody>
+ </table>
+ </section>
+
+ <section id="key-alphanumeric-functional" typeof="bibo:Chapter" resource="#key-alphanumeric-functional" >
+ <h6>Functional Keys</h6>
+ <p>The Functional keys (<em>not to be confused with the
+ <a href="#key-function-section">Function keys</a> described later</em>) are those
+ keys in the Alphanumeric section that provide general editing functions that are common to all locales
+ (like Shift, Tab, Enter and Backspace).
+ With a few exceptions, these keys do not change meaning based on the current keyboard layout.
+ </p>
+ <figure id="fig-the-standard-set-of-functional-keys-in-the-alphanumeric-section."><object class="figure" data="keyboard-codes-alphanum2.svg" type="image/svg+xml" width="653" height="225" title="The standard set of functional keys in the alphanumeric section."></object><figcaption>Fig. <span class="figno">12</span> <span class="fig-title">The standard set of functional keys in the alphanumeric section.</span></figcaption></figure>
+ <table id="table-key-code-alphanumeric-functional-1" class="data-table full-width">
+ <caption>List of code values for functional keys in the Alphanumeric section.</caption>
+ <thead><tr><th>Code Value</th><th>USB Usage ID<br>Page 0x07<br>(Informative)</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-AltLeft" class="key-code">'AltLeft'</code></td>
+ <td>0xe2</td><td>Labelled <code class="keycap">Alt</code> or <code class="keycap">Option</code>.</td></tr>
+ <tr><td><code id="code-AltRight" class="key-code">'AltRight'</code></td>
+ <td>0xe6</td><td>Labelled <code class="keycap">Alt</code> or <code class="keycap">Option</code>. This is the <code class="keycap">AltGr</code> key on many keyboard layouts.</td></tr>
+ <tr><td><code id="code-CapsLock" class="key-code">'CapsLock'</code></td>
+ <td>0x39</td><td></td></tr>
+ <tr><td><code id="code-ContextMenu" class="key-code">'ContextMenu'</code></td>
+ <td>0x65</td><td>The application context menu key, which is typically found between the right OS key and the right Control key.</td></tr>
+ <tr><td><code id="code-ControlLeft" class="key-code">'ControlLeft'</code></td>
+ <td>0xe0</td><td></td></tr>
+ <tr><td><code id="code-ControlRight" class="key-code">'ControlRight'</code></td>
+ <td>0xe4</td><td></td></tr>
+ <tr><td><code id="code-Enter" class="key-code">'Enter'</code></td>
+ <td>0x28</td><td>Labelled <code class="keycap">Enter</code> and <code class="keycap">Return</code> on Macintosh keyboards.</td></tr>
+ <tr><td><code id="code-OSLeft" class="key-code">'OSLeft'</code></td>
+ <td>0xe3</td><td>The Windows, <code class="keycap">⌘</code>, <code class="keycap">Command</code> or other OS symbol key.</td></tr>
+ <tr><td><code id="code-OSRight" class="key-code">'OSRight'</code></td>
+ <td>0xe7</td><td>The Windows, <code class="keycap">⌘</code>, <code class="keycap">Command</code> or other OS symbol key.</td></tr>
+ <tr><td><code id="code-ShiftLeft" class="key-code">'ShiftLeft'</code></td>
+ <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>
+ </table>
+ <p>On some keyboards (notably Japanese and Korean) the spacebar is reduced in size to make room
+ for extra keys on the bottom row. These keys typically allow the users to change the current input
+ mode. Note that even though some of these Japanese and Korean keys occupy the same physical location on the
+ keyboard, they use different <code>code</code> values.
+ </p>
+ <figure id="fig-comparison-of-the-lower-row-of-functional-keys-on-different-keyboards."><object class="figure" data="functional-row-a.svg" type="image/svg+xml" width="700" height="160" title="Comparison of the lower row of functional keys on different keyboards."></object><figcaption>Fig. <span class="figno">13</span> <span class="fig-title">Comparison of the lower row of functional keys on different keyboards.</span></figcaption></figure>
+ <table id="table-key-code-alphanumeric-functional-2" class="data-table full-width">
+ <caption>List of code values for functional keys found on Japanese and Korean keyboards.</caption>
+ <thead><tr><th>Code Value</th><th>USB Usage ID<br>Page 0x07<br>(Informative)</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-Convert" class="key-code">'Convert'</code></td>
+ <td>0x8a</td><td>Japanese: <code class="keycap">変換</code> (<span class="phonetic">henkan</span>)</td></tr>
+ <tr><td><code id="code-HangulMode" class="key-code">'HangulMode'</code></td>
+ <td>0x90</td><td>Korean: <code class="keycap">한/영</code> (<span class="phonetic">han/yeong</span>)</td></tr>
+ <tr><td><code id="code-Hanja" class="key-code">'Hanja'</code></td>
+ <td>0x91</td><td>Korean: <code class="keycap">한자</code> (<span class="phonetic">hanja</span>)</td></tr>
+ <tr><td><code id="code-KanaMode" class="key-code">'KanaMode'</code></td>
+ <td>0x88</td><td>Japanese: <code class="keycap">カタカナ/ひらがな/ローマ字</code> (<span class="phonetic">katakana/hiragana/romaji</span>)</td></tr>
+ <tr><td><code id="code-NoConvert" class="key-code">'NoConvert'</code></td>
+ <td>0x8b</td><td>Japanese: <code class="keycap">無変換</code> (<span class="phonetic">muhenkan</span>)</td></tr>
+ </tbody>
+ </table>
+ <p>On Apple keyboards, some keys on the bottom row are omitted and others are arranged in
+ a different order.
+ </p>
+ </section>
+ </section>
+
+ <section id="key-controlpad-section" typeof="bibo:Chapter" resource="#key-controlpad-section" >
+ <h5><span class="secno">4.3.3.2 </span>Control Pad Section</h5>
+ <p>The Control Pad contains keys for navigating and editing documents.
+ </p>
+ <figure id="fig-standard-control-pad-layouts"><object class="figure" data="control-pad.svg" type="image/svg+xml" width="495" height="135" title="Standard Control Pad layouts"></object><figcaption>Fig. <span class="figno">14</span> <span class="fig-title">Standard Control Pad layouts</span></figcaption></figure>
+ <table id="table-key-code-controlpad" class="data-table full-width">
+ <caption>List of code values for keys in the ControlPad section.</caption>
+ <thead><tr><th>Code Value</th><th>USB Usage ID<br>Page 0x07<br>(Informative)</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-Delete" class="key-code">'Delete'</code></td>
+ <td>0x4c</td><td></td></tr>
+ <tr><td><code id="code-End" class="key-code">'End'</code></td>
+ <td>0x4d</td><td></td></tr>
+ <tr><td><code id="code-Help" class="key-code">'Help'</code></td>
+ <td>0x75</td><td>Not present on standard PC keyboards.</td></tr>
+ <tr><td><code id="code-Home" class="key-code">'Home'</code></td>
+ <td>0x4a</td><td></td></tr>
+ <tr><td><code id="code-Insert" class="key-code">'Insert'</code></td>
+ <td>0x49</td><td>Not present on Apple keyboards.</td></tr>
+ <tr><td><code id="code-PageUp" class="key-code">'PageDown'</code></td>
+ <td>0x4e</td><td></td></tr>
+ <tr><td><code id="code-PageDown" class="key-code">'PageUp'</code></td>
+ <td>0x4b</td><td></td></tr>
+ </tbody>
+ </table>
+ <p>Note: The <code>code</code> for the <code class="key-code">'Fn'</code> key (found on
+ some Apple keyboards) is defined below in the Function Section.
+ </p>
+ </section>
+
+ <section id="key-arrowpad-section" typeof="bibo:Chapter" resource="#key-arrowpad-section" >
+ <h5><span class="secno">4.3.3.3 </span>Arrow Pad Section</h5>
+ <p>The Arrow Pad section contains the 4 arrow keys.
+ </p>
+ <figure id="fig-standard-arrow-pad-layout"><object class="figure" data="arrow-pad.svg" type="image/svg+xml" width="160" height="115" title="Standard Arrow Pad layout"></object><figcaption>Fig. <span class="figno">15</span> <span class="fig-title">Standard Arrow Pad layout</span></figcaption></figure>
+ <table id="table-key-code-arrowpad" class="data-table full-width">
+ <caption>List of code values for keys in the ArrowPad section.</caption>
+ <thead><tr><th>Code Value</th><th>USB Usage ID<br>Page 0x07<br>(Informative)</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-ArrowDown" class="key-code">'ArrowDown'</code></td>
+ <td>0x51</td><td></td></tr>
+ <tr><td><code id="code-ArrowLeft" class="key-code">'ArrowLeft'</code></td>
+ <td>0x50</td><td></td></tr>
+ <tr><td><code id="code-ArrowRight" class="key-code">'ArrowRight'</code></td>
+ <td>0x4f</td><td></td></tr>
+ <tr><td><code id="code-ArrowUp" class="key-code">'ArrowUp'</code></td>
+ <td>0x52</td><td></td></tr>
+ </tbody>
+ </table>
+ </section>
+
+ <section id="key-numpad-section" typeof="bibo:Chapter" resource="#key-numpad-section" >
+ <h5><span class="secno">4.3.3.4 </span>Numpad Section</h5>
+ <p>The Numpad Section contains numeric and mathematical operator keys arranged in a calculator-grid
+ to facilitate numeric data entry.
+ </p>
+ <figure id="fig-standard-numpad-layouts"><object class="figure" data="numpad.svg" type="image/svg+xml" width="606" height="247" title="Standard Numpad layouts"></object><figcaption>Fig. <span class="figno">16</span> <span class="fig-title">Standard Numpad layouts</span></figcaption></figure>
+ <p>The standard Numpad is sometimes extended with additional keys for parentheses, operators,
+ hexadecimal symbols, or calculator functions (like backspace). Some of the commonly added keys are
+ listed in the table below.
+ </p>
+ <table id="table-key-code-numpad" class="data-table full-width">
+ <caption>List of code values for keys in the Numpad section.</caption>
+ <thead><tr><th>Code Value</th><th>USB Usage ID<br>Page 0x07<br>(Informative)</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-NumLock" class="key-code">'NumLock'</code></td>
+ <td>0x53</td><td></td></tr>
+ <tr><td><code id="code-Numpad0" class="key-code">'Numpad0'</code></td>
+ <td>0x62</td><td><code class="keycap">0</code> and <code class="keycap">Insert</code></td></tr>
+ <tr><td><code id="code-Numpad1" class="key-code">'Numpad1'</code></td>
+ <td>0x59</td><td><code class="keycap">1</code> and <code class="keycap">End</code></td></tr>
+ <tr><td><code id="code-Numpad2" class="key-code">'Numpad2'</code></td>
+ <td>0x5a</td><td><code class="keycap">2</code> and <code class="keycap">ArrowDown</code></td></tr>
+ <tr><td><code id="code-Numpad3" class="key-code">'Numpad3'</code></td>
+ <td>0x5b</td><td><code class="keycap">3</code> and <code class="keycap">PageDown</code></td></tr>
+ <tr><td><code id="code-Numpad4" class="key-code">'Numpad4'</code></td>
+ <td>0x5c</td><td><code class="keycap">4</code> and <code class="keycap">ArrowLeft</code></td></tr>
+ <tr><td><code id="code-Numpad5" class="key-code">'Numpad5'</code></td>
+ <td>0x5d</td><td><code class="keycap">5</code></td></tr>
+ <tr><td><code id="code-Numpad6" class="key-code">'Numpad6'</code></td>
+ <td>0x5e</td><td><code class="keycap">6</code> and <code class="keycap">ArrowRight</code></td></tr>
+ <tr><td><code id="code-Numpad7" class="key-code">'Numpad7'</code></td>
+ <td>0x5f</td><td><code class="keycap">7</code> and <code class="keycap">Home</code></td></tr>
+ <tr><td><code id="code-Numpad8" class="key-code">'Numpad8'</code></td>
+ <td>0x60</td><td><code class="keycap">8</code> and <code class="keycap">ArrowUp</code></td></tr>
+ <tr><td><code id="code-Numpad9" class="key-code">'Numpad9'</code></td>
+ <td>0x61</td><td><code class="keycap">9</code> and <code class="keycap">PageUp</code></td></tr>
+ <tr><td><code id="code-NumpadAdd" class="key-code">'NumpadAdd'</code></td>
+ <td>0x57</td><td><code class="keycap">+</code></td></tr>
+ <tr><td><code id="code-NumpadBackspace" class="key-code">'NumpadBackspace'</code></td>
+ <td>0xbb</td><td>Found on the Microsoft Natural Keyboard.</td></tr>
+ <tr><td><code id="code-NumpadClear" class="key-code">'NumpadClear'</code></td>
+ <td>0xd8</td><td></td></tr>
+ <tr><td><code id="code-NumpadClearEntry" class="key-code">'NumpadClearEntry'</code></td>
+ <td>0xd9</td><td></td></tr>
+ <tr><td><code id="code-NumpadComma" class="key-code">'NumpadComma'</code></td>
+ <td>0x85</td><td><code class="keycap">,</code> (thousands separator). For locales where the thousands separator is a <code class="glyph">'.'</code> (e.g., Brazil), this key may generate a <code class="glyph">'.'</code>.</td></tr>
+ <tr><td><code id="code-NumpadDecimal" class="key-code">'NumpadDecimal'</code></td>
+ <td>0x63</td><td><code class="keycap">.</code> (decimal separator) and <code class="keycap">Delete</code>. For locales where the decimal separator is <code class="glyph">','</code> (e.g., Brazil), this key may generate a <code class="glyph">','</code>.</td></tr>
+ <tr><td><code id="code-NumpadDivide" class="key-code">'NumpadDivide'</code></td>
+ <td>0x54</td><td><code class="keycap">/</code></td></tr>
+ <tr><td><code id="code-NumpadEnter" class="key-code">'NumpadEnter'</code></td>
+ <td>0x58</td><td></td></tr>
+ <tr><td><code id="code-NumpadMemoryAdd" class="key-code">'NumpadMemoryAdd'</code></td>
+ <td>0xd3</td><td></td></tr>
+ <tr><td><code id="code-NumpadMemoryClear" class="key-code">'NumpadMemoryClear'</code></td>
+ <td>0xd2</td><td></td></tr>
+ <tr><td><code id="code-NumpadMemoryRecall" class="key-code">'NumpadMemoryRecall'</code></td>
+ <td>0xd1</td><td></td></tr>
+ <tr><td><code id="code-NumpadMemoryStore" class="key-code">'NumpadMemoryStore'</code></td>
+ <td>0xd0</td><td></td></tr>
+ <tr><td><code id="code-NumpadMemorySubtract" class="key-code">'NumpadMemorySubtract'</code></td>
+ <td>0xd4</td><td></td></tr>
+ <tr><td><code id="code-NumpadMultiply" class="key-code">'NumpadMultiply'</code></td>
+ <td>0x55</td><td><code class="keycap">*</code></td></tr>
+ <tr><td><code id="code-NumpadParenLeft" class="key-code">'NumpadParenLeft'</code></td>
+ <td>0xb6</td><td><code class="keycap">(</code> Found on the Microsoft Natural Keyboard.</td></tr>
+ <tr><td><code id="code-NumpadParenRight" class="key-code">'NumpadParenRight'</code></td>
+ <td>0xb7</td><td><code class="keycap">)</code> Found on the Microsoft Natural Keyboard.</td></tr>
+ <tr><td><code id="code-NumpadSubtract" class="key-code">'NumpadSubtract'</code></td>
+ <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 string should be created by
+ starting with 'Numpad' and appending an appropriate description of the key.
+ </p>
+ </section>
+
+ <section id="key-function-section" typeof="bibo:Chapter" resource="#key-function-section" >
+ <h5><span class="secno">4.3.3.5 </span>Function Section</h5>
+ <p>The Function section runs along the top of the keyboard and contains the function keys and
+ a few additional special keys (for example, <code class="key-code">'Esc'</code> and
+ <code class="key-code">'PrintScreen'</code>).
+ </p>
+ <p>On some keyboards (especially those found on laptops or other portable computers), the function keys
+ (<code class="key-code">'F1'</code> ... <code class="key-code">'F12'</code>)
+ are defined to have other primary functions (like controlling display brightness or
+ audio volume) and require that a separate <code class="key-code">'Fn'</code> key
+ be pressed to make them act as function keys.
+ Unfortunately, the primary functions assigned to these keys varies widely from one manufacturer to the next.
+ Because of this, the <code>code</code> is always set to the function key name.
+ </p>
+ <table id="table-key-code-function" class="data-table full-width">
+ <caption>List of code values for keys in the Function section.</caption>
+ <thead><tr><th>Code Value</th><th>USB Usage ID<br>Page 0x07<br>(Informative)</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-Esc" class="key-code">'Esc'</code></td>
+ <td>0x29</td><td></td></tr>
+ <tr><td><code id="code-F1" class="key-code">'F1'</code></td>
+ <td>0x3a</td><td></td></tr>
+ <tr><td><code id="code-F2" class="key-code">'F2'</code></td>
+ <td>0x3b</td><td></td></tr>
+ <tr><td><code id="code-F3" class="key-code">'F3'</code></td>
+ <td>0x3c</td><td></td></tr>
+ <tr><td><code id="code-F4" class="key-code">'F4'</code></td>
+ <td>0x3d</td><td></td></tr>
+ <tr><td><code id="code-F5" class="key-code">'F5'</code></td>
+ <td>0x3e</td><td></td></tr>
+ <tr><td><code id="code-F6" class="key-code">'F6'</code></td>
+ <td>0x3f</td><td></td></tr>
+ <tr><td><code id="code-F7" class="key-code">'F7'</code></td>
+ <td>0x40</td><td></td></tr>
+ <tr><td><code id="code-F8" class="key-code">'F8'</code></td>
+ <td>0x41</td><td></td></tr>
+ <tr><td><code id="code-F9" class="key-code">'F9'</code></td>
+ <td>0x42</td><td></td></tr>
+ <tr><td><code id="code-F10" class="key-code">'F10'</code></td>
+ <td>0x43</td><td></td></tr>
+ <tr><td><code id="code-F11" class="key-code">'F11'</code></td>
+ <td>0x44</td><td></td></tr>
+ <tr><td><code id="code-F12" class="key-code">'F12'</code></td>
+ <td>0x45</td><td></td></tr>
+ <tr><td><code id="code-Fn" class="key-code">'Fn'</code></td>
+ <td></td><td>This is typically a hardware key that does not generate a separate code. Most keyboards do not place this key in the Function section, but it is included here to keep with related keys.</td></tr>
+ <tr><td><code id="code-FLock" class="key-code">'FLock'</code></td>
+ <td></td><td>Found on the Microsoft Natural Keyboard.</td></tr>
+ <tr><td><code id="code-PrintScreen" class="key-code">'PrintScreen'</code></td>
+ <td>0x46</td><td><code class="keycap">PrintScreen</code> and <code class="keycap">SysReq</code></td></tr>
+ <tr><td><code id="code-ScrollLock" class="key-code">'ScrollLock'</code></td>
+ <td>0x47</td><td></td></tr>
+ <tr><td><code id="code-Pause" class="key-code">'Pause'</code></td>
+ <td>0x48</td><td><code class="keycap">Pause</code> and <code class="keycap">Break</code></td></tr>
+ </tbody>
+ </table>
+ <p>For keyboards that provide more than 12 function keys, the <code>code</code> value follows the pattern
+ shown above with 'F' followed by the function key number - <code class="key-code">'F13'</code>, <code class="key-code">'F14'</code>,
+ <code class="key-code">'F15'</code>, and so on.
+ </p>
+ <p>Note: Apple keyboards may have <code class="key-code">'Eject'</code> or <code class="key-code">'Power'</code>
+ keys in the Function section. The <code>code</code> values
+ for these keys are defined in the Media Keys section.
+ </p>
+ </section>
+
+ <section id="key-media" typeof="bibo:Chapter" resource="#key-media" >
+ <h5><span class="secno">4.3.3.6 </span>Media Keys</h5>
+ <p>Keys that fall outside the sections listed above are referred to as "media keys" since
+ they commonly provide "media" functions like play, pause or volume control.
+ </p>
+ <p>These are extra keys that many keyboard manufacturers add, but do not have a consistent location.
+ These keys are often distinct from normal typing keys in appearance and may be recessed in the
+ keyboard.
+ </p>
+ <p>On laptop keyboards, these keys are often merged with the Function keys, with the "media" interpretation
+ being the primary function of the key and the "function key" interpretation requiring the
+ <code class="key-code">'Fn'</code> key to be pressed at the same time. In this configuration the
+ <code>code</code> should be set to match the function key (<code class="key-code">'F1'</code> ...
+ <code class="key-code">'F12'</code>). When the keys are merged in this fashion, the <code>code</code>
+ values are taken from the function key value since the "media" value is not consistent across
+ keyboards.
+ </p>
+ <table id="table-key-code-media" class="data-table full-width">
+ <caption>List of code values for media keys.</caption>
+ <thead><tr><th>Code Value</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-BrowserBack" class="key-code">'BrowserBack'</code></td>
+ <td>Some laptops place this key to the left of the <code class="key-code">'ArrowUp'</code> key.</td></tr>
+ <tr><td><code id="code-BrowserFavorites" class="key-code">'BrowserFavorites'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-BrowserForward" class="key-code">'BrowserForward'</code></td>
+ <td>Some laptops place this key to the right of the <code class="key-code">'ArrowUp'</code> key.</td></tr>
+ <tr><td><code id="code-BrowserHome" class="key-code">'BrowserHome'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-BrowserRefresh" class="key-code">'BrowserRefresh'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-BrowserSearch" class="key-code">'BrowserSearch'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-BrowserStop" class="key-code">'BrowserStop'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-Eject" class="key-code">'Eject'</code></td>
+ <td>This key is placed in the Function section on some Apple keyboards.</td></tr>
+ <tr><td><code id="code-LaunchApp1" class="key-code">'LaunchApp1'</code></td>
+ <td>Sometimes labelled <code class="keycap">My Computer</code> on the keyboard</td></tr>
+ <tr><td><code id="code-LaunchApp2" class="key-code">'LaunchApp2'</code></td>
+ <td>Sometimes labelled <code class="keycap">Calculator</code> on the keyboard</td></tr>
+ <tr><td><code id="code-LaunchMail" class="key-code">'LaunchMail'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-MediaNextTrack" class="key-code">'MediaNextTrack'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-MediaPlayPause" class="key-code">'MediaPlayPause'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-MediaPreviousTrack" class="key-code">'MediaPreviousTrack'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-MediaSelect" class="key-code">'MediaSelect'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-MediaStop" class="key-code">'MediaStop'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-Power" class="key-code">'Power'</code></td>
+ <td>This key is placed in the Function section on some Apple keyboards, replacing the <code class="key-code">'Eject'</code> key.</td></tr>
+ <tr><td><code id="code-Sleep" class="key-code">'Sleep'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-VolumeDown" class="key-code">'VolumeDown'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-VolumeMute" class="key-code">'VolumeMute'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-VolumeUp" class="key-code">'VolumeUp'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-WakeUp" class="key-code">'WakeUp'</code></td>
+ <td></td></tr>
+ </tbody>
+ </table>
+ </section>
+
+ <section id="key-legacy" typeof="bibo:Chapter" resource="#key-legacy" >
+ <h5><span class="secno">4.3.3.7 </span>Legacy Keys</h5>
+ <p>These keys are not found on modern keyboards.
+ They are listed here are for reference purposes.
+ </p>
+ <table id="table-key-code-legacy" class="data-table full-width">
+ <caption>List of code values for legacy keys.</caption>
+ <thead><tr><th>Code Value</th><th>Notes (Informative)</th></tr></thead>
+ <tbody>
+ <tr><td><code id="code-Abort" class="key-code">'Abort'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-Hyper" class="key-code">'Hyper'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-Meta" class="key-code">'Meta'</code></td>
+ <td>Do not use <code class="key-code">'Meta'</code> as a key <code>code</code>. The key labelled <code class="keycap">Meta</code> should be encoded as <code class="key-code">'OSLeft'</code>.</td></tr>
+ <tr><td><code id="code-Resume" class="key-code">'Resume'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-Super" class="key-code">'Super'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-Suspend" class="key-code">'Suspend'</code></td>
+ <td></td></tr>
+ <tr><td><code id="code-Turbo" class="key-code">'Turbo'</code></td>
+ <td></td></tr>
+ </tbody>
+ </table>
+ </section>
+
+ </section><!-- keyboard-key-codes -->
+ </section><!-- keyboards -->
+
+ <section id="non-keyboards" typeof="bibo:Chapter" resource="#non-keyboards" >
+ <h3><span class="secno">4.4 </span>Non-Standard Keyboards and Other Input Devices</h3>
+ <p>This section briefly describes how key input from non-standard keyboards and other
+ input devices should be handled with respect to the <code>code</code> attribute.
+ </p>
+ <p>In general, these devices do not suffer from the complications found on
+ found on standard PC computers (modifier keys and support for multiple input layouts)
+ so the <code>code</code> attribute can be duplicated from the <code>key</code>
+ attribute or left empty.
+ </p>
+
+ <section id="remote-controls" typeof="bibo:Chapter" resource="#remote-controls" >
+ <h4><span class="secno">4.4.1 </span>Media Remote Controls</h4>
+ <p>Remote controls for media devices typically consist of a set of buttons that are used to directly
+ control media functions on the device. These remote control buttons typically do not
+ have modifier states so each button is assigned a single function (like "Play", "Pause",
+ "Up", "Menu" or "Exit").
+ </p>
+ <p>This simple arrangement where each button has one function means that the
+ <code>code</code> attribute will usually be exactly the same as the <code>key</code>
+ attribute for that button. It is only if the remote control has a mechanism
+ (like the "2nd" function button on a calculator) that allows buttons to produce
+ alternate <code>key</code> values that the <code>code</code> value will differ from
+ the <code>key</code> value.
+ In this case, the value of the <code>code</code> attribute should always be the value
+ that the button would produce when in its factory-reset condition.
+ </p>
+ </section><!-- remote-controls -->
+
+ <section id="virtual-keyboards" typeof="bibo:Chapter" resource="#virtual-keyboards" >
+ <h4><span class="secno">4.4.2 </span>Virtual Keyboards</h4>
+ <p>When a virtual keyboard is mimicking the layout and functionality of a standard
+ keyboard, then it should also set the <code>code</code> attribute as appropriate.
+ Otherwise, it can leave this field blank.
+ </p>
+ </section><!-- virtual-keyboards -->
+
+ <section id="chording-keyboards" typeof="bibo:Chapter" resource="#chording-keyboards" >
+ <h4><span class="secno">4.4.3 </span>Chording Keyboards</h4>
+ <p>A chording keyboard is a keyboard with a small number of physical keys that requires
+ the user to hold a number of keys simultaneously
+ (or press them in sequence) to produce a single key input event. The advantage of chording
+ keyboards is that they require a small number of distinct keys and can usually be
+ operated with a single hand.
+ </p>
+ <p>If implemented properly, the system should be unaware that the user is entering text
+ using a chording keyboard, so the code that translates the chord combinations to
+ regular key events should fabricate appropriate <code>code</code> values.
+ </p>
+ </section><!-- chording-keyboards -->
+
+ <section id="other-devices" typeof="bibo:Chapter" resource="#other-devices" >
+ <h4><span class="secno">4.4.4 </span>Other Devices</h4>
+ <p>Other devices that generate key events should be supported in the manner described above
+ in the <a href="#remote-controls">Media Remote Controls</a> section:
+ </p>
+ <ul>
+ <li>If the button or key always produces the same <code>key</code> value, then the
+ <code>code</code> should simply be duplicated from the <code>key</code>.
+ </li>
+ <li>If the button of key can produce different <code>key</code> values based on some
+ modifier state, then the <code>code</code> value should be the <code>key</code> value
+ generated when the button is pressed while the device is in its factory-reset state.
+ </li>
+ </ul>
+ <p>When there isn't an appropriate <code>code</code> value already defined and a new
+ value needs to be chosen, the string value should be constructed so that descriptive
+ (avoid names that are ambiguous or too short) and wherever possible, related buttons
+ should share a common prefix (like the Numpad keys).
+ </p>
+ </section><!-- other-devices -->
+ </section><!-- keyboards -->
+
+ </section><!-- keyboard-events -->
+
+
+
+<section id="references" class="appendix" typeof="bibo:Chapter" resource="#references" ><!--OddPage--><h2>
+<span class="secno">A. </span>References</h2><section id="normative-references" typeof="bibo:Chapter" resource="#normative-references" >
+<h3><span class="secno">A.1 </span>Normative references</h3>
+<dl class="bibliography" >
+
+<dt id="bib-BCP47">[BCP47]</dt>
+<dd>A. Phillips; M. Davis. <a href="http://tools.ietf.org/html/bcp47"><cite>Tags for Identifying Languages</cite></a>. September 2009. IETF Best Current Practice. URL: <a href="http://tools.ietf.org/html/bcp47">http://tools.ietf.org/html/bcp47</a> </dd>
+
+<dt id="bib-DOM-LEVEL-3-EVENTS">[DOM-LEVEL-3-EVENTS]</dt>
+<dd>Travis Leithead; Jacob Rossi; Doug Schepers; Björn Höhrmann; Philippe Le Hégaret; Tom Pixley. <a href="http://www.w3.org/TR/DOM-Level-3-Events/"><cite>Document Object Model (DOM) Level 3 Events Specification</cite></a>. 06 September 2012. W3C Working Draft. URL: <a href="http://www.w3.org/TR/DOM-Level-3-Events/">http://www.w3.org/TR/DOM-Level-3-Events/</a> </dd>
+
+<dt id="bib-DOM4">[DOM4]</dt>
+<dd>Anne van Kesteren; Aryeh Gregor; Lachlan Hunt; Ms2ger. <a href="http://www.w3.org/TR/dom/"><cite>DOM4</cite></a>. 6 December 2012. W3C Working Draft. URL: <a href="http://www.w3.org/TR/dom/">http://www.w3.org/TR/dom/</a> </dd>
+
+<dt id="bib-RFC2119">[RFC2119]</dt>
+<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key words for use in RFCs to Indicate Requirement Levels.</cite></a> March 1997. Internet RFC 2119. URL: <a href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a> </dd>
+</dl>
+</section>
+</section>
+</body>
+</html>
+