diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/keyboardevent | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/api/keyboardevent')
| -rw-r--r-- | files/ja/web/api/keyboardevent/code/index.html | 220 | ||||
| -rw-r--r-- | files/ja/web/api/keyboardevent/index.html | 343 | ||||
| -rw-r--r-- | files/ja/web/api/keyboardevent/iscomposing/index.html | 62 | ||||
| -rw-r--r-- | files/ja/web/api/keyboardevent/key/index.html | 234 | ||||
| -rw-r--r-- | files/ja/web/api/keyboardevent/keycode/index.html | 3181 |
5 files changed, 4040 insertions, 0 deletions
diff --git a/files/ja/web/api/keyboardevent/code/index.html b/files/ja/web/api/keyboardevent/code/index.html new file mode 100644 index 0000000000..ddc2eac17e --- /dev/null +++ b/files/ja/web/api/keyboardevent/code/index.html @@ -0,0 +1,220 @@ +--- +title: KeyboardEvent.code +slug: Web/API/KeyboardEvent/code +tags: + - API + - Code + - DOM + - DOM Events + - KeyboardEvent + - Property + - Read-only + - Reference + - UI Events + - プロパティ + - 読取専用 +translation_of: Web/API/KeyboardEvent/code +--- +<div>{{APIRef("DOM Events")}}</div> + +<p><span class="seoSummary"><code>KeyboardEvent.code</code> プロパティは、 (キー入力によって入力された文字ではなく) キーボード上の物理的なキーを表します。つまり、このプロパティはキーボードレイアウトや修飾キーの状態によって変更される前の値を返します。</span></p> + +<p>入力機器が物理キーボードではなく、仮想キーボードやアクセシビリティデバイスである場合、返値は物理キーボードから入力された場合にできるだけ近づくよう、物理キーボードと仮想入力機器との互換性を最大にするよう、ブラウザーによって設定されます。</p> + +<p>このプロパティは、キーに関連付けられている文字ではなく、入力デバイス上の物理的な位置に基づいてキー入力を扱いたいときに役立ちます。これは特に、キーボードをゲームパッドのように使いたい場合などに有用です。ただし、 <code>KeyboardEvent.code</code> で報告された値を用いてキー入力で生成される文字を判断するべきではありません。キーコード名がキー上に印刷されている実際の文字や、キーが押されたときにコンピューターが生成する文字と一致するとは限らないからです。</p> + +<p>例えば、返ってきた <code>code</code> が "<code>KeyQ</code>" は QWERTY レイアウトのキーボードでは <kbd>Q</kbd> キーですが、同じ Dvorak キーボードでは同じ <code>code</code> の値が <kbd>'</kbd> キーを表し、 AZERTY キーボードでは <kbd>A</kbd> キーを表すものでもあります。したがって、すべてのユーザーが特定のキーボードレイアウトを使用しているわけではないため、 <code>code</code> の値を用いてユーザーが認識しているキーの名前が何であるかを特定することはできません。</p> + +<p>キーイベントに対応する文字が何であるかを判別するには、、代わりに{{domxref("KeyboardEvent.key")}} プロパティを使用してください。</p> + +<h2 id="Code_values" name="Code_values">コードの値</h2> + +<p>Windows, Linux, macOS におけるコード値は、 <a href="/ja/docs/Web/API/KeyboardEvent/code/code_values">KeyboardEvent: コード値</a>ページにあります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Exercising_KeyboardEvent" name="Exercising_KeyboardEvent">KeyboardEvent の使用例</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>Press keys on the keyboard to see what the KeyboardEvent's key and code + values are for each one.</p> +<div id="output"> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">#output { + font-family: Arial, Helvetica, sans-serif; + border: 1px solid black; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">window.addEventListener("keydown", function(event) { + let str = "KeyboardEvent: key='" + event.key + "' | code='" + + event.code + "'"; + let el = document.createElement("span"); + el.innerHTML = str + "<br/>"; + + document.getElementById("output").appendChild(el); +}, true);</pre> + +<h4 id="Try_it_out" name="Try_it_out">試してみよう</h4> + +<p>キー入力をサンプルコードに取得させるために、キーを入力する前に output ボックスをクリックしてください。</p> + +<p>{{ EmbedLiveSample('Exercising_KeyboardEvent', 600, 300) }}</p> + +<h3 id="Handle_keyboard_events_in_a_game" name="Handle_keyboard_events_in_a_game">ゲームでのキーボードイベントの扱い</h3> + +<p>This example establishes an event listener for {{event("keydown")}} events which handles keyboard input for a game which uses the typical "WASD" keyboard layout for steering forward, left, backward, and right. This will use the same four keys physically regardless of what the actual corresponding characters are, such as if the user is using an AZERTY keyboard.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html notranslate"><p>Use the WASD (ZQSD on AZERTY) keys to move and steer.</p> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="world"> + <polygon id="spaceship" points="15,0 0,30 30,30"/> +</svg> +<script>refresh();</script> +</pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css notranslate">.world { + margin: 0px; + padding: 0px; + background-color: black; + width: 400px; + height: 400px; +} + +#spaceship { + fill: orange; + stroke: red; + stroke-width: 2px; +}</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>The first section of the JavaScript code establishes some variables we'll be using. <code>shipSize</code> contains the size of the ship the player is moving around, for convenience. <code>position</code> is used to track the position of the ship within the play field. <code>moveRate</code> and <code>turnRate</code> are the number of pixels forward and backward each keystroke moves the ship and how many degrees of rotation the left and right steering controls apply per keystroke. angle is the current amount of rotation applied to the ship, in degrees; it starts at 0° (pointing straight up). Finally, <code>spaceship</code> is set to refer to the element with the ID <code>"spaceship"</code>, which is the SVG polygon representing the ship the player controls.</p> + +<pre class="brush: js notranslate">let shipSize = { + width: 30, + height: 30 +}; + +let position = { + x: 200, + y: 200 +}; + +let moveRate = 9; +let turnRate = 5; + +let angle = 0; + +let spaceship = document.getElementById("spaceship"); +</pre> + +<p>Next comes the function <code>updatePosition()</code>. This function takes as input the distance the ship is to be moved, where positive is a forward movement and negative is a backward movement. This function computes the new position of the ship given the distance moved and the current direction the ship is facing. It also handles ensuring that the ship wraps across the boundaries of the play field instead of vanishing.</p> + +<pre class="brush: js notranslate">function updatePosition(offset) { + let rad = angle * (Math.PI/180); + position.x += (Math.sin(rad) * offset); + position.y -= (Math.cos(rad) * offset); + + if (position.x < 0) { + position.x = 399; + } else if (position.x > 399) { + position.x = 0; + } + + if (position.y < 0) { + position.y = 399; + } else if (position.y > 399) { + position.y = 0; + } +} +</pre> + +<p>The <code>refresh()</code> function handles applying the rotation and position by using an <a href="/en-US/docs/Web/SVG/Attribute/transform">SVG transform</a>.</p> + +<pre class="brush: js notranslate">function refresh() { + let x = position.x - (shipSize.width/2); + let y = position.y - (shipSize.height/2); + let transform = "translate(" + x + " " + y + ") rotate(" + angle + " 15 15) "; + + spaceship.setAttribute("transform", transform); +} +</pre> + +<p>Finally, the <code>addEventListener()</code> method is used to start listening for {{event("keydown")}} events, acting on each key by updating the ship position and rotation angle, then calling <code>refresh()</code> to draw the ship at its new position and angle.</p> + +<pre class="brush: js notranslate">window.addEventListener("keydown", function(event) { + if (event.defaultPrevented) { + return; // Do nothing if event already handled + } + + switch(event.code) { + case "KeyS": + case "ArrowDown": + // Handle "back" + updatePosition(-moveRate); + break; + case "KeyW": + case "ArrowUp": + // Handle "forward" + updatePosition(moveRate); + break; + case "KeyA": + case "ArrowLeft": + // Handle "turn left" + angle -= turnRate; + break; + case "KeyD": + case "ArrowRight": + // Handle "turn right" + angle += turnRate; + break; + } + + refresh(); + + // Consume the event so it doesn't get handled twice + event.preventDefault(); +}, true);</pre> + +<h4 id="Try_it_out_2">Try it out</h4> + +<p>To ensure that keystrokes go to the sample code, click inside the black game play field below before pressing keys.</p> + +<p>{{EmbedLiveSample("Handle_keyboard_events_in_a_game", 420, 460)}}</p> + +<p>There are several ways this code can be made better. Most real games would watch for {{event("keydown")}} events, start motion when that happens, and stop the motion when the corresponding {{event("keyup")}} occurs, instead of relying on key repeats. That would allow both smoother and faster movement, but would also allow the player to be moving and steering at the same time. Transitions or animations could be used to make the ship's movement smoother, too.</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#dom-keyboardevent-code', 'KeyboardEvent.code')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td>初回定義、<a href="https://dvcs.w3.org/hg/dom3events/raw-file/tip/html/DOM3Events-code.html">コード値</a>を含む。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.KeyboardEvent.code")}}</p> diff --git a/files/ja/web/api/keyboardevent/index.html b/files/ja/web/api/keyboardevent/index.html new file mode 100644 index 0000000000..a9174b98e6 --- /dev/null +++ b/files/ja/web/api/keyboardevent/index.html @@ -0,0 +1,343 @@ +--- +title: KeyboardEvent +slug: Web/API/KeyboardEvent +tags: + - API + - DOM + - Event + - Input + - Interface + - Key Events + - Keyboard Events + - KeyboardEvent + - MakeBrowserAgnostic + - Reference + - UI Events + - keyboard + - user input + - イベント +translation_of: Web/API/KeyboardEvent +--- +<div>{{APIRef("DOM Events")}}</div> + +<p><span class="seoSummary"><strong><code>KeyboardEvent</code></strong> オブジェクトは、キーボードによるユーザーの操作を示します。個々のイベントがユーザーとキーとの間の単一の操作 (または修飾キーとの組み合わせ) を表します。</span>イベントの種類 ({{event('keydown')}}, {{event('keypress')}}, {{event('keyup')}}) はキーボード操作が発生した種類を識別します。</p> + +<div class="note"><strong>メモ:</strong> <code>KeyboardEvent</code> は、単にユーザーがキーボードのキーで行った操作が何であるかを低水準で示すものであり、その操作のその場面における意味は持ちません。テキストの入力を処理したい場合は、代わりに {{event("input")}} イベントを使用してください。ユーザーが他の種類のテキスト入力、例えば、タブレット端末やタブレット機器による手書き入力システムなどを使用している場合は、キーボードイベントが発生することはありません。</div> + +<p>{{InheritanceDiagram}}</p> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}</dt> + <dd><code>KeyboardEvent</code> オブジェクトを生成します。</dd> +</dl> + +<h2 id="定数">定数</h2> + +<p><code>KeyboardEvent</code> インターフェースは、以下の定数を定義しています。</p> + +<h3 id="Keyboard_locations">Keyboard locations</h3> + +<p>以下の定数は、キーイベントがキーボードのどの部分から発信されるかを識別します。これらは、<code>KeyboardEvent.DOM_KEY_LOCATION_STANDARD</code> などとしてアクセスされます。</p> + +<table class="standard-table"> + <caption>キーボードの場所の識別子</caption> + <thead> + <tr> + <th scope="col">定数</th> + <th scope="col">値</th> + <th scope="col">説明</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>DOM_KEY_LOCATION_STANDARD</code></td> + <td>0x00</td> + <td> + <p>イベントによって記述されたキーは、キーボードの特定の領域にあることが特定されず、テンキー上にはなく(NumLock キーでない限り)、キーボードの左右に重複しているキーについては、何らかの理由で、そのキーは、その場所に関連付けられていないことになります。</p> + + <p>例としては、標準的な PC 101 US キーボードの英数字キー、NumLock キー、スペースバーなどがあります。</p> + </td> + </tr> + <tr> + <td><code>DOM_KEY_LOCATION_LEFT</code></td> + <td>0x01</td> + <td> + <p>キーは、キーボード上の複数の位置に存在してもよいものであり、この例では、キーボードの左側にある。</p> + + <p>例としては、左の Ctrl キー、Macintosh キーボードの左の Command キー、左の Shift キーなどがあります。</p> + </td> + </tr> + <tr> + <td><code>DOM_KEY_LOCATION_RIGHT</code></td> + <td>0x02</td> + <td> + <p>キーは、キーボード上の複数の位置に存在してもよいものであり、この場合、キーボードの右側に位置している。</p> + + <p>例としては、右の Shift キーや右の Alt キー (Mac キーボードの Option) などがあります。</p> + </td> + </tr> + <tr> + <td><code>DOM_KEY_LOCATION_NUMPAD</code></td> + <td>0x03</td> + <td> + <p>キーはテンキー上に配置されているか、またはキーの発生源となる場所が複数ある場合はテンキーに関連付けられた仮想キーとなります。NumLock キーはこのグループには該当せず、常に <code>DOM_KEY_LOCATION_STANDARD</code> の位置でエンコードされています。</p> + + <p>例としては、テンキーパッドの数字、キーパッドの Enter キー、キーパッドの小数点などがあります。</p> + </td> + </tr> + </tbody> +</table> + +<dl> +</dl> + +<h2 id="Methods" name="Methods">プロパティ</h2> + +<p><em>このインターフェイスでは、親に相当する {{domxref("UIEvent")}} と {{domxref("Event")}} の両者からもプロパティを継承しています。</em></p> + +<dl> + <dt>{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}</dt> + <dd>そのキーイベントが発生した際に <kbd>Alt</kbd> (OS X の場合は <kbd>Option</kbd> または <kbd>⌥</kbd>) キーが押されていれば {{jsxref("Boolean")}} <code>true</code> を返します。</dd> +</dl> + +<dl> + <dt>{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}</dt> + <dd>そのイベントが表すキーについて、キーのコード値を {{domxref("DOMString")}} で返します。 + <div class="warning"><strong>警告:</strong> これはユーザーのキーボード配列を無視しますので、ユーザーが QWERTY キーボード配列の "Y" の位置のキー (ホーム行の上の行の中ほど) を押すと、ユーザーが QWERTZ キーボード (ユーザーが "Z" だと思っており、その他のプロパティも "Z" を示している) や Dvorak キーボード配列 (ユーザーは "F" だと思っている) を使用していても、常に "KeyY" を返します。</div> + </dd> +</dl> + +<dl> + <dt>{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}</dt> + <dd>そのキーイベントが発生した際に <kbd>Ctrl</kbd> キーが押されていれば {{jsxref("Boolean")}} <code>true</code> を返します。</dd> + <dt>{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}</dt> + <dd>そのイベントが <code>compositionstart</code> と <code>compositionend</code> の間に発生したものであれば {{jsxref("Boolean")}} <code>true</code> を返します。</dd> + <dt>{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}</dt> + <dd>イベントが表すキーのキー値を表す {{domxref("DOMString")}} を返します。</dd> + <dt>{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}</dt> + <dd>キーボードが設定されているロケールを示すロケール文字列を {{domxref("DOMString")}} で返します。ブラウザやデバイスがキーボードのロケールを知らない場合は空文字列となります。 + <div class="note"><strong>メモ:</strong> このプロパティは入力データのロケールを表すことはありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。</div> + </dd> + <dt>{{domxref("KeyboardEvent.location")}}{{Readonlyinline}}</dt> + <dd>キーボードなどの入力デバイス上のキーの位置を表す {{jsxref("Number")}} を返します。位置を特定する定数の一覧は、上記の {{anch("Keyboard locations")}} の中にあります。</dd> + <dt>{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}</dt> + <dd>{{jsxref("Boolean")}} を返し、そのキーイベントが発生した際に <kbd>Meta</kbd> キー（Mac キーボードは <kbd>⌘ Command</kbd> キー、 Windows キーボードは Windows キー <kbd>⊞</kbd> ）が押されていれば <code>true</code> を返します。</dd> + <dt>{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}</dt> + <dd>{{jsxref("Boolean")}} を返し、そのキーが自動的に繰り返し押下されていた場合に <code>true</code> を返します。</dd> + <dt>{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}</dt> + <dd>{{jsxref("Boolean")}} を返し、そのキーイベントが発生した際に <kbd>Shift</kbd> キーが押されていれば <code>true</code> を返します。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>このインターフェイスでは、親に相当する {{domxref("UIEvent")}} と {{domxref("Event")}} の両者からもメソッドを継承しています。</em></p> + +<dl> + <dt>{{domxref("KeyboardEvent.getModifierState()")}}</dt> + <dd>そのイベントが発生した際に修飾キー (<kbd>Alt</kbd> / <kbd>Shift</kbd> / <kbd>Ctrl</kbd> / <kbd>Meta</kbd>) が押されていたかどうかを表す{{jsxref("Boolean")}} を返します。</dd> +</dl> + +<h2 id="廃止されたメソッド">廃止されたメソッド</h2> + +<dl> + <dt>{{domxref("KeyboardEvent.initKeyEvent()")}} {{deprecated_inline}}</dt> + <dd><code>KeyboardEvent</code> オブジェクトを初期化します。これは Firefox でのみ実装されていたもので、Firefox でもサポートされていないため、代わりに {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} コンストラクタを使用する必要があります。</dd> + <dt>{{domxref("KeyboardEvent.initKeyboardEvent()")}} {{deprecated_inline}}</dt> + <dd><code>KeyboardEvent</code> オブジェクトを初期化します。これは現在では非推奨です。代わりに {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} コンストラクタを使用する必要があります。</dd> +</dl> + +<h2 id="廃止されたプロパティ">廃止されたプロパティ</h2> + +<dl> + <dt>{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}</dt> + <dd>キーの文字値を表す {{domxref("DOMString")}} を返します。キーが印刷可能な文字に対応している場合、この値はその文字を含む空でない Unicode 文字列となります。キーが印刷可能な表現を持たない場合は、これは空の文字列です。 + <div class="note"><strong>注意:</strong> キーが複数の文字を挿入するマクロとして使用されている場合、この属性の値は最初の文字だけでなく文字列全体となります。</div> + </dd> + <dt>{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}</dt> + <dd>キーの Unicode 参照番号を表す {{jsxref("Number")}} を返します。この属性は、<code>keypress</code> イベントでのみ使用されます。<code>char</code> 属性が複数の文字を含むキーの場合、これはその属性の最初の文字の Unicode 値となります。Firefox 26 では、これは印刷可能な文字のコードを返します。 + <div class="warning"><strong>警告:</strong> この属性は非推奨です。利用可能な場合は、代わりに {{domxref("KeyboardEvent.key")}} を使用する必要があります。</div> + </dd> + <dt>{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}</dt> + <dd>押されたキーの変更されていない値を示す、システムや実装に依存した数値コードを表す {{jsxref("Number")}} を返します。 + <div class="warning"><strong>警告:</strong> この属性は非推奨です。利用可能な場合は、代わりに {{domxref("KeyboardEvent.key")}} を使用する必要があります。</div> + </dd> + <dt>{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt> + <dd>このプロパティは非標準であり、{{domxref("KeyboardEvent.key")}} を支持して非推奨とされています。これは古いバージョンの DOM Level 3 Events の一部でした。</dd> + <dt>{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}</dt> + <dd>これは {{domxref("KeyboardEvent.location")}} の非標準の非推奨エイリアスです。これは古いバージョンの DOM Level 3 Events の一部でした。</dd> + <dt>{{domxref("KeyboardEvent.which")}} {{deprecated_inline}} {{Readonlyinline}}</dt> + <dd>押されたキーの変更されていない値を識別するシステムおよび実装依存の数値コードを表す {{jsxref("Number")}} を返します。これは通常 <code>keyCode</code> と同じです。 + <div class="warning"><strong>警告:</strong> この属性は非推奨です。利用可能な場合は、代わりに {{domxref("KeyboardEvent.key")}} を使用する必要があります。</div> + </dd> +</dl> + +<h2 id="イベント">イベント</h2> + +<p>以下のイベントは、<code>KeyboardEvent</code> 型に基づいています。これらのイベントは、{{domxref("Element")}}、{{domxref("Document")}}、および {{domxref("Window")}} を含む {{domxref("GlobalEventHandlers")}} を実装している任意のオブジェクトに配信することができます。以下のリストでは、各イベントは、そのイベントの <code>Document</code> ハンドラのドキュメントにリンクしています。</p> + +<dl> + <dt>{{domxref("Document.keydown_event", "keydown")}}</dt> + <dd>キーが押されました。</dd> + <dt>{{domxref("Document.keyup_event", "keyup")}}</dt> + <dd>キーが離されました。</dd> +</dl> + +<h3 id="廃止されたイベント">廃止されたイベント</h3> + +<dl> + <dt>{{domxref("Document.keypress_event", "keypress")}} {{obsolete_inline}}</dt> + <dd>通常は文字値を生成するキーが押されました。このイベントはデバイス依存度が高く、時代遅れのものです。使用すべきではありません。</dd> +</dl> + +<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2> + +<p>イベントには <code>keydown</code> / <code>keypress</code> / <code>keyup</code> の 3 種類があります。 Gecko ではほとんどのキーにおいて、以下のようにキーイベントが連続して発生します。</p> + +<ol> + <li>そのキーが最初に押された時点で <code>keydown</code> イベントが発生します。</li> + <li>そのキーが修飾キーでなかった場合、 <code>keypress</code> イベントが発生します。</li> + <li>ユーザがキーから指を離した時点で <code>keyup</code> イベントが発生します。</li> +</ol> + +<h3 id="Special_cases" name="Special_cases">特殊な場合</h3> + +<p>Caps Lock や Num Lock、 Scroll Lock などのキーは LED 表示も切り替わります。このようなキーについて、 Windows と Linux では <code>keydown</code> と <code>keyup</code> イベントのみが発生します。</p> + +<div class="note"> +<p>Linux の Firefox 12 以前では <code>keypress</code> イベントも発生していました。</p> +</div> + +<p>しかし Mac OS X のイベントモデルに関する制約から、Mac OS X の Caps Lock は <code>keydown</code> イベントのみが発生します。 (2007 年モデル以前の) ノート型では Num Lock もサポートされていましたが、今日の Mac OS X では外部キーボードにおいても Num Lock に対応していません。 Num Lock キーがある古い MacBook 上では、Num Lock キーによってイベントは何も発生しません。また、 F14 キーが接続されている外部キーボードであれば、 Gecko は Scroll Lock に対応しています。古い特定のバージョンの Firefox では、このキーによって <code>keypress</code> イベントが発生していました。この矛盾する挙動は {{bug(602812)}} で修正されました。</p> + +<h3 id="Auto-repeat_handling" name="Auto-repeat_handling">自動リピートの扱い</h3> + +<p>キーが押されたままになると自動リピートが始まります。これによって以下のようにイベントが連続して発生します。</p> + +<ol> + <li><code>keydown</code></li> + <li><code>keypress</code></li> + <li><code>keydown</code></li> + <li><code>keypress</code></li> + <li><<ユーザがキーから指を離すまで繰り返し>></li> + <li><code>keyup</code></li> +</ol> + +<p>この流れは DOM Level 3 仕様書に定義されているものです。しかし、これには以下のような注意点があります。</p> + +<h4 id="Auto-repeat_on_some_GTK_environments_such_as_Ubuntu_9.4" name="Auto-repeat_on_some_GTK_environments_such_as_Ubuntu_9.4">Ubuntu 9.4 など一部の GTK 環境における自動リピート</h4> + +<p>GTK を用いた環境の中には、自動リピート時にネイティブの key-up イベントが発生するものがあります。このため、キーが連続して押されているのか自動リピートなのかを Gecko 側から認識することはできません。そのようなプラットフォームでの自動リピート時では、以下のようにキーイベントが連続して発生します。</p> + +<ol> + <li><code>keydown</code></li> + <li><code>keypress</code></li> + <li><code>keyup</code></li> + <li><code>keydown</code></li> + <li><code>keypress</code></li> + <li><code>keyup</code></li> + <li><<ユーザがキーから指を離すまで繰り返し>></li> + <li><code>keyup</code></li> +</ol> + +<p>こういった環境では残念ながら、自動リピートなのか連続して押されているのかをウェブコンテンツ側から区別することはできません。</p> + +<h4 id="Auto-repeat_handling_prior_to_Gecko_5.0" name="Auto-repeat_handling_prior_to_Gecko_5.0">Gecko 5.0 以前の自動リピートの扱い</h4> + +<p>Gecko 5.0 {{geckoRelease('5.0')}} 以前では、プラットフォーム間でキーボードのイベントハンドリングに差異が生じていました。</p> + +<dl> + <dt>Windows</dt> + <dd>自動リピートの挙動に関して Gecko 4.0 とそれ以降で変化はありません。</dd> + <dt>Mac</dt> + <dd>最初に keydown イベントが発生した後、 keyup イベントが発生するまでは keypress イベントのみが発生します。断続的に keydown イベントが発生することはありません。</dd> + <dt>Linux</dt> + <dd>イベントの挙動はプラットフォームによって異なります。ネイティブのイベントモデルによって、 Windows のような挙動を示したり、 Mac のような挙動を示すものがあります。</dd> +</dl> + +<p class="note"><strong>メモ:</strong> 手動でイベントを発生させても、関連する既定のアクションは<em>生じません</em>。例えば、手動でキーイベントを発生させても、その文字がテキストとして入力されることはありません。このような UI イベントの挙動は、セキュリティを意識して設計されています。この設計により、ブラウザーとやり取りするユーザー操作をスクリプトが模倣できないようにしています。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate"><!DOCTYPE html> +<html> +<head> +<script> +'use strict'; + +document.addEventListener('keydown', (event) => { + const keyName = event.key; + + if (keyName === 'Control') { + // do not alert when only Control key is pressed. + return; + } + + if (event.ctrlKey) { + // Even though event.key is not 'Control' (e.g., 'a' is pressed), + // event.ctrlKey may be true if Ctrl key is pressed at the same time. + alert(`Combination of ctrlKey + ${keyName}`); + } else { + alert(`Key pressed ${keyName}`); + } +}, false); + +document.addEventListener('keyup', (event) => { + const keyName = event.key; + + // As the user releases the Ctrl key, the key is no longer active, + // so event.ctrlKey is false. + if (keyName === 'Control') { + alert('Control key was released'); + } +}, false); + +</script> +</head> + +<body> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<p><code>KeyboardEvent</code> インターフェイスの草案は数多く提案されてきました。まず最初は DOM Events Level 2 でしたが意見がまとまらず破棄され、続いて DOM Events Level 3 が提案されました。これにより、非標準な初期化メソッドが実装されてしまいました (Gecko では DOM Events Level 2 の初期に定義されていた {{domxref("KeyboardEvent.initKeyEvent()")}} が、他のブラウザでは DOM Events Level 3 の初期に定義されていた {{domxref("KeyboardEvent.initKeyboardEvent()")}} です)。しかし両者のメソッドは、モダンなコンストラクターである {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} で置き換えられています。</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.KeyboardEvent")}}</p> + +<h3 id="Compatibility_notes" name="Compatibility_notes">互換性のメモ</h3> + +<ul> + <li>Firefox 65 では、 <code>keypress</code> イベントは<a href="/en-US/docs/Web/API/KeyboardEvent/keyCode#Non-printable_keys_(function_keys)">印字可能キー以外</a>では発生しなくなりました ({{bug(968056)}})が、 <kbd>Enter</kbd> キー、 <kbd>Shift</kbd> + <kbd>Enter</kbd> キー、 <kbd>Ctrl</kbd> + <kbd>Enter</kbd> キーの組み合わせでは発生します (これらはブラウザー間の互換性の目的のために維持されています)。</li> +</ul> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("KeyboardEvent.code")}}.</li> + <li>{{domxref("KeyboardEvent.key")}}.</li> + <li>{{domxref("KeyboardEvent.getModifierState()")}}</li> +</ul> diff --git a/files/ja/web/api/keyboardevent/iscomposing/index.html b/files/ja/web/api/keyboardevent/iscomposing/index.html new file mode 100644 index 0000000000..802db3b32b --- /dev/null +++ b/files/ja/web/api/keyboardevent/iscomposing/index.html @@ -0,0 +1,62 @@ +--- +title: KeyboardEvent.isComposing +slug: Web/API/KeyboardEvent/isComposing +tags: + - API + - DOM + - KeyboardEvent + - Property + - Read-only + - Reference +translation_of: Web/API/KeyboardEvent/isComposing +--- +<p>{{APIRef("DOM Events")}}</p> + +<p><code><strong>KeyboardEvent.isComposing</strong></code> は読み取り専用プロパティで、 {{jsxref("Boolean")}} 値でイベントが変換セッションの途中、すなわち {{domxref("Element/compositionstart_event", "compositionstart")}} の後かつ {{domxref("Element/compositionend_event", "compositionend")}} の前に発行されたことを示します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>bool</var> = <var>event</var>.isComposing;</pre> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">var kbdEvent = new KeyboardEvent("syntheticKey", false); +console.log(kbdEvent.isComposing); // false を返す +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#dom-keyboardevent-iscomposing', 'KeyboardEvent.prototype.isComposing')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-isComposing','KeyboardEvent.prototype.isComposing')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.KeyboardEvent.isComposing")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element/compositionstart_event", "compositionstart")}} および {{domxref("Element/compositionend_event", "compositionend")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> +</ul> diff --git a/files/ja/web/api/keyboardevent/key/index.html b/files/ja/web/api/keyboardevent/key/index.html new file mode 100644 index 0000000000..93d031fb63 --- /dev/null +++ b/files/ja/web/api/keyboardevent/key/index.html @@ -0,0 +1,234 @@ +--- +title: KeyboardEvent.key +slug: Web/API/KeyboardEvent/key +tags: + - API + - DOM + - KeyboardEvent + - Property + - Read-only + - Reference + - UI Events + - プロパティ +translation_of: Web/API/KeyboardEvent/key +--- +<div>{{APIRef("DOM Events")}}</div> + +<p><span class="seoSummary">{{domxref("KeyboardEvent")}} インターフェイスの <code><strong>key</strong></code> はプロパティは読み取り専用で、ユーザーが押したキーの値を、 <kbd>Shift</kbd> キーなどの修飾キーやキーボードのロケールやレイアウトを考慮した値で返します。</span>値は以下のように判断されます。</p> + +<div class="moreinfo pull-aside"> +<h4 id="Key_values" name="Key_values">キーの値</h4> + +<p><a href="/docs/Web/API/KeyboardEvent/key/Key_Values">キーの値</a>の完全なリストを参照してください。</p> +</div> + +<ul> + <li>押されたキーが印刷表現を持っている場合は、返された値は空ではない Unicode 文字の文字列で、キーの印刷表現が入ります。</li> + <li>押されたキーが制御または特殊文字である場合は、返値は<a href="/docs/Web/API/KeyboardEvent/key/Key_Values">定義済みキー値</a>の内の一つになります。</li> + <li><code>KeyboardEvent</code> が<a href="https://ja.wikipedia.org/wiki/%E3%83%87%E3%83%83%E3%83%89%E3%82%AD%E3%83%BC">デッドキー</a>が押されたことを表すのであれば、キーの値は "<code>Dead</code>" になります。</li> + <li>キーボードの一部の特殊なキー (マルチメディアキーボードにおけるメディア制御のための拡張キーなど) は Windows のキーコードを生成しません。代わりに <code>WM_APPCOMMAND</code> イベントを起動します。これらのイベントは DOM キーボードイベントに対応付けられ、 Windows の「仮想キーコード」の中で、実際のキーコードではないものの紹介されます。</li> + <li>キーが特定できなかった場合は、 <code>Unidentified</code> の値を返します。</li> +</ul> + +<h2 id="KeyboardEvent_sequence" name="KeyboardEvent_sequence">KeyboardEvent シーケンス</h2> + +<p>それぞれの <code>KeyboardEvent</code> はあらかじめ定められたシーケンスで発生します。キーが押された場合、発生する一連の <code>KeyboardEvent</code> は {{domxref("Event.preventDefault")}} が呼び出されないと想定すれば次のようになります。</p> + +<ol> + <li>最初に {{domxref("Element/keydown_event", "keydown")}} イベントが発生します。キーがそれ以上押され続けてそのキーが文字を入力する場合は、イベントはプラットフォームの実装に依存した間隔で発生し続け、読み取り専用の {{domxref("KeyboardEvent.repeat")}} プロパティが <code>true</code> に設定されます。</li> + <li>もしキー入力が{{HTMLElement("input")}}、{{HTMLElement("textarea")}}もしくは{{domxref("HTMLElement.contentEditable")}}が <code>true</code> の要素に文字を挿入する場合は、 {{domxref("HTMLElement/beforeinput_event", "beforeinput")}}と{{domxref("HTMLElement/input_event", "input")}}イベント型がその順番で発火されます。 他の実装が{{domxref("Element/keypress_event", "keypress")}}イベントを実装していれば発火する可能性があることに注意してください。イベントはキーが押されている間連続で発火します。</li> + <li>キーを離した際に{{domxref("Element/keyup_event", "keyup")}}イベントが発火します。これで一連の処理は終わりです。</li> +</ol> + +<p>1と3の処理で、 <code>KeyboardEvent.key</code> 属性が定義され、先ほど定義したルールにのっとって値が設定されます。</p> + +<h2 id="KeyboardEvent_sequence_example" name="KeyboardEvent_sequence_example">KeyboardEvent シーケンスの例</h2> + +<p>Consider the event sequence generated when we interact with the <kbd>Shift</kbd> and the <kbd>2</kbd> key using a U.S keyboard layout as compared to when we do so using a UK keyboard layout.</p> + +<p>Try experimenting using the following two test cases:</p> + +<ol> + <li>Press and hold the <kbd>Shift</kbd> key, then press <kbd>2</kbd> and release it. Next, release the <kbd>Shift</kbd> key.</li> + <li>Press and hold the <kbd>Shift</kbd> key, then press and hold <kbd>2</kbd>. Release the <kbd>Shift</kbd> key. Finally, release <kbd>2</kbd>.</li> +</ol> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="fx"> + <div> + <textarea rows="5" name="test-target" id="test-target"></textarea> + <button type="button" name="btn-clear-console" id="btn-clear-console">clear console</button> + </div> + <div class="flex"> + <pre id="console-log"></pre> + </div> +</div> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.fx { + -webkit-display: flex; + display: flex; + margin-left: -20px; + margin-right: -20px; +} + +.fx > div { + padding-left: 20px; + padding-right: 20px; +} + +.fx > div:first-child { + width: 30%; +} + +.flex { + -webkit-flex: 1; + flex: 1; +} + +#test-target { + display: block; + width: 100%; + margin-bottom: 10px; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">let textarea = document.getElementById('test-target'), +consoleLog = document.getElementById('console-log'), +btnClearConsole = document.getElementById('btn-clear-console'); + +function logMessage(message) { + document.getElementById("console-log").innerHTML += message + "<br>"; +} + +textarea.addEventListener('keydown', (e) => { + if (!e.repeat) + logMessage(`Key "${e.key}" pressed [event: keydown]`); + else + logMessage(`Key "${e.key}" repeating [event: keydown]`); +}); + +textarea.addEventListener('beforeinput', (e) => { + logMessage(`Key "${e.data}" about to be input [event: beforeinput]`); +}); + +textarea.addEventListener('input', (e) => { + logMessage(`Key "${e.data}" input [event: input]`); +}); + +textarea.addEventListener('keyup', (e) => { + logMessage(`Key "${e.key}" released [event: keyup]`); +}); + +btnClearConsole.addEventListener('click', (e) => { + let child = consoleLog.firstChild; + while (child) { + consoleLog.removeChild(child); + child = consoleLog.firstChild; + } +});</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample('KeyboardEvent_sequence_example')}}</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> On browsers that don't fully implement the {{domxref("InputEvent")}} interface which is used for the {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events, you may get incorrect output on those lines of the log output.</p> +</div> + +<h3 id="Case_1" name="Case_1">Case 1</h3> + +<p>When the shift key is pressed, a {{domxref("Element/keydown_event", "keydown")}} event is first fired, and the <code>key</code> property value is set to the string <code>Shift</code>. As we keep holding this key, the {{domxref("Element/keydown_event", "keydown")}} event does not continue to fire repeatedly because it does not produce a character key.</p> + +<p>When <code>key 2</code> is pressed, another {{domxref("Element/keydown_event", "keydown")}} event is fired for this new key press, and the <code>key</code> property value for the event is set to the string <code>@</code> for the U.S keyboard type and <code>"</code> for the UK keyboard type, because of the active modifier <code>shift</code> key. The {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events are fired next because a character key has been produced.</p> + +<p>As we release the <code>key 2</code>, a {{domxref("Element/keyup_event", "keyup")}} event is fired and the <code>key</code> property will maintain the string values <code>@</code> and <code>"</code> for the different keyboard layouts respectively.</p> + +<p>As we finally release the <code>shift</code> key, another {{domxref("Element/keyup_event", "keyup")}} event is fired for it, and the key attribute value remains <code>Shift</code>.</p> + +<h3 id="Case_2" name="Case_2">Case 2</h3> + +<p>When the shift key is pressed, a {{domxref("Element/keydown_event", "keydown")}} event is first fired, and the <code>key</code> property value is set to be the string <code>Shift</code>. As we keep holding this key, the keydown event does not continue to fire repeatedly because it produced no character key.</p> + +<p>When <code>key 2</code> is pressed, another {{domxref("Element/keydown_event", "keydown")}} event is fired for this new key press, and the <code>key</code> property value for the event is set to be the string <code>@</code> for the U.S keyboard type and <code>"</code> for the UK keyboard type, because of the active modifier <code>shift</code> key. The {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}}{{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events are fired next because a character key has been produced. As we keep holding the key, the {{domxref("Element/keydown_event", "keydown")}} event continues to fire repeatedly and the {{domxref("KeyboardEvent.repeat")}} property is set to <code>true</code>. The {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events are fired repeatedly as well.</p> + +<p>As we release the <code>shift</code> key, a {{domxref("Element/keyup_event", "keyup")}} event is fired for it, and the key attribute value remains <code>Shift</code>. At this point, notice that the <code>key</code> property value for the repeating keydown event of the <code>key 2</code> key press is now "2" because the modifier <code>shift</code> key is no longer active. The same goes for the {{domxref("InputEvent.data")}} property of the {{domxref("HTMLElement/beforeinput_event", "beforeinput")}} and {{domxref("HTMLElement/input_event", "input")}} events.</p> + +<p>As we finally release the <code>key 2</code>, a {{domxref("Element/keyup_event", "keyup")}} event is fired but the <code>key</code> property will be set to the string value <code>2</code> for both keyboard layouts because the modifier <code>shift</code> key is no longer active.</p> + +<h2 id="Example" name="Example">例</h2> + +<p>This example uses {{domxref("EventTarget.addEventListener()")}} to listen for {{domxref("Element/keydown_event", "keydown")}} events. When they occur, the key's value is checked to see if it's one of the keys the code is interested in, and if it is, it gets processed in some way (possibly by steering a spacecraft, perhaps by changing the selected cell in a spreadsheet).</p> + +<pre class="brush: js notranslate">window.addEventListener("keydown", function (event) { + if (event.defaultPrevented) { + return; // Do nothing if the event was already processed + } + + switch (event.key) { + case "Down": // IE/Edge specific value + case "ArrowDown": + // Do something for "down arrow" key press. + break; + case "Up": // IE/Edge specific value + case "ArrowUp": + // Do something for "up arrow" key press. + break; + case "Left": // IE/Edge specific value + case "ArrowLeft": + // Do something for "left arrow" key press. + break; + case "Right": // IE/Edge specific value + case "ArrowRight": + // Do something for "right arrow" key press. + break; + case "Enter": + // Do something for "enter" or "return" key press. + break; + case "Esc": // IE/Edge specific value + case "Escape": + // Do something for "esc" key press. + break; + default: + return; // Quit when this doesn't handle the key event. + } + + // Cancel the default action to avoid it being handled twice + event.preventDefault(); +}, true); +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#dom-keyboardevent-key', 'KeyboardEvent.key')}}</td> + <td>{{Spec2('UI Events')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#widl-KeyboardEvent-key', 'KeyboardEvent.key')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>初回定義で、キーの値を含みます。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.KeyboardEvent.key")}}</p> diff --git a/files/ja/web/api/keyboardevent/keycode/index.html b/files/ja/web/api/keyboardevent/keycode/index.html new file mode 100644 index 0000000000..d080637e20 --- /dev/null +++ b/files/ja/web/api/keyboardevent/keycode/index.html @@ -0,0 +1,3181 @@ +--- +title: KeyboardEvent.keyCode +slug: Web/API/KeyboardEvent/keyCode +translation_of: Web/API/KeyboardEvent/keyCode +--- +<p>{{APIRef("DOM Events")}}{{deprecated_header()}}</p> + +<p><span class="seoSummary">非推奨の <code><strong>KeyboardEvent.keyCode</strong></code> 読み取り専用プロパティは、押されたキーの変更されていない値を識別するシステムおよび実装に依存する数値コードを表します。</span> これは通常、キーに対応する 10進 ASCII ({{RFC(20)}}) またはWindows 1252 コードです。キーを識別できない場合は、この値は <code>0</code> になります。</p> + +<p>これはしばらくの間、非推奨とされています。その代わりに、{{domxref("KeyboardEvent.code")}} が実装されている場合は、{{domxref("KeyboardEvent.code")}} を使うべきです。残念ながら、いくつかのブラウザはまだこれを持っていないので、すべてのターゲットブラウザでサポートされているものを使うように注意しなければなりません。</p> + +<div class="note"> +<p>Web 開発者は、<code>keydown</code> 及び <code>keyup</code> イベントを扱う際に、印刷可能な文字に対して <code>keyCode</code> 属性を使用すべきではありません。上述したように、<code>keyCode</code> 属性は、印刷可能な文字、特に <kbd>Shift</kbd> キーや <kbd>Alt</kbd> キーが押された状態で入力された文字には有用ではありません。ショートカットキーハンドラを実装する場合、{{event("keypress")}} イベントの方が通常は良いでしょう (少なくとも Gecko が使用中のランタイムの場合)。詳細は <a href="/ja/docs/Mozilla/Gecko/Gecko_keypress_event">Gecko Keypress Event</a> を参照してください。</p> +</div> + +<h2 id="例">例</h2> + +<pre class="brush: js notranslate">window.addEventListener("keydown", function (event) { + if (event.defaultPrevented) { + return; // デフォルトのアクションがキャンセルされている場合は何もしないようにします。 + } + + var handled = false; + if (event.key !== undefined) { + // KeyboardEvent.key でイベントを処理し、handled を true に設定します。 + } else if (event.keyCode !== undefined) { + // KeyboardEvent.keyCode でイベントを処理し、handled を true に設定します。 + } + + if (handled) { + // イベントが処理された場合、"ダブルアクション" を抑制する + event.preventDefault(); + } +}, true); +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM3 Events','#widl-KeyboardEvent-keyCode','KeyboardEvent.keyCode')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>初期定義; 非推奨として指定されています。</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性表は、構造化データから生成されています。データに貢献したい方は、<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.KeyboardEvent.keyCode")}}</p> + +<h2 id="keyCodeの値">keyCodeの値</h2> + +<h3 id="標準位置で印刷可能なキー">標準位置で印刷可能なキー</h3> + +<p>標準位置で印刷可能なキーを押したり離したりすることで発生するキーイベントの値は、ブラウザ間で互換性がありません。</p> + +<p>IE just exposes the native virtual keycode value as <code>KeyboardEvent.keyCode</code>.</p> + +<p>Google Chrome, Chromium and Safari must decide the value from the input character. If the inputting character can be inputted with the US keyboard layout, they use the <code>keyCode</code> value on the US keyboard layout.</p> + +<p>Starting in Firefox 15 {{geckoRelease("15.0")}}, Gecko gets <code>keyCode</code> values from ASCII characters inputtable by the key — even with shift modifiers or an ASCII capable keyboard layout. See the following rules for details:</p> + +<ol> + <li>If the system is Windows and the native keycode of the pressed key indicates that the key is a-z or 0-9, use a keycode for it.</li> + <li>If the system is Mac and the native keycode of the pressed key indicates that the key is 0-9, use a keycode for it.</li> + <li>If the pressed key inputs an ASCII alphabetic or numeric character with no modifier key, use a keycode for it.</li> + <li>If the pressed key inputs an ASCII alphabetic or numeric character with a Shift key modifier, use a keycode for it.</li> + <li>If the pressed key inputs a different ASCII character with no modifier key, use a keycode for it.</li> + <li>If the pressed key inputs a different ASCII character with a Shift key modifier, use a keycode for it.</li> + <li>Otherwise, i.e., pressed key inputs a unicode character: + <ol> + <li>If the keyboard layout is ASCII-capable (i.e., can input ASCII alphabets), use 0 or compute with <a href="#keyCode_of_punctuation_keys_on_some_keyboard_layout">the following additional rules</a>.</li> + <li>Otherwise, i.e., the keyboard layout isn't ASCII capable, use the ASCII capable keyboard layout installed on the environment with the highest priority: + <ol> + <li>If the pressed key on the alternative keyboard layout inputs an ASCII alphabetic or numeric character, use a keycode for it.</li> + <li>Otherwise, use 0 or compute with <a href="#keyCode_of_punctuation_keys_on_some_keyboard_layout">the following additional rules</a>.</li> + </ol> + </li> + </ol> + </li> +</ol> + +<p id="keyCode_of_punctuation_keys_on_some_keyboard_layout">Starting in Firefox 60 {{geckoRelease("60.0")}}, Gecko sets <code>keyCode</code> values of punctuation keys as far as possible (when points 7.1 or 7.2 in the above list are reached) with the following rules:</p> + +<div class="warning"> +<p>The purpose of these new additional rules is for making users whose keyboard layouts map unicode characters to punctuation keys in a US keyboard layout can use web applications which support Firefox only with ASCII-capable keyboard layouts or just with a US keyboard layout. Otherwise, the newly mapped <code>keyCode</code> values may be conflict with other keys. For example, if the active keyboard layout is Russian, the <code>keyCode</code> value of <strong>both</strong> the <code>"Period"</code> key and <code>"Slash"</code> key are <code>190</code> (<code>KeyEvent.DOM_VK_PERIOD</code>). If you need to distinguish those keys but you don't want to support all keyboard layouts in the world by yourself, you should probably use {{domxref("KeyboardEvent.code")}}.</p> +</div> + +<ol> + <li>If running macOS or Linux: + <ol> + <li>If the active keyboard layout is not ASCII-capable and an alternative ASCII-capable keyboard layout is available. + <ol> + <li>If the alternative ASCII-capable keyboard layout produces an ASCII character via just the unmodified key, use a <code>keyCode</code> for the character.</li> + <li>If the alternative ASCII-capable keyboard layout produces an ASCII character with a Shift key modifier, use a <code>keyCode</code> for the shifted character.</li> + <li>Otherwise, use a <code>keyCode</code> for an ASCII character produced by the key when the US keyboard layout is active.</li> + </ol> + </li> + <li>Otherwise, use a <code>keyCode</code> for an ASCII character produced by the key when the US keyboard layout is active.</li> + </ol> + </li> + <li>If running on Windows: + <ol> + <li>Use a <code>keyCode</code> value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when the US keyboard layout is active.</li> + </ol> + </li> +</ol> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by printable keys in standard position</caption> + <thead> + <tr> + <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th> + <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th> + <th colspan="3" rowspan="1" scope="col">Chromium 34</th> + <th colspan="3" rowspan="1" scope="col">Safari 7</th> + <th colspan="9" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th colspan="1" scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th colspan="1" scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th> + <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th> + <th colspan="3" rowspan="1" scope="col">Chromium 34</th> + <th colspan="3" rowspan="1" scope="col">Safari 7</th> + <th colspan="9" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"Digit1"</code></th> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + <td colspan="3" rowspan="1"><code>0x31 (49)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit2"</code></th> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + <td colspan="3" rowspan="1"><code>0x32 (50)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit3"</code></th> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + <td colspan="3" rowspan="1"><code>0x33 (51)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit4"</code></th> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + <td colspan="3" rowspan="1"><code>0x34 (52)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit5"</code></th> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + <td colspan="3" rowspan="1"><code>0x35 (53)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit6"</code></th> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + <td colspan="3" rowspan="1"><code>0x36 (54)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit7"</code></th> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + <td colspan="3" rowspan="1"><code>0x37 (55)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit8"</code></th> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + <td colspan="3" rowspan="1"><code>0x38 (56)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit9"</code></th> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + <td colspan="3" rowspan="1"><code>0x39 (57)</code></td> + </tr> + <tr> + <th scope="row"><code>"Digit0"</code></th> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + <td colspan="3" rowspan="1"><code>0x30 (48)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyA"</code></th> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + <td colspan="3" rowspan="1"><code>0x41 (65)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyB"</code></th> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + <td colspan="3" rowspan="1"><code>0x42 (66)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyC"</code></th> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + <td colspan="3" rowspan="1"><code>0x43 (67)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyD"</code></th> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)<span style="display: none;"> </span></code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + <td colspan="3" rowspan="1"><code>0x44 (68)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyE"</code></th> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + <td colspan="3" rowspan="1"><code>0x45 (69)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyF"</code></th> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + <td colspan="3" rowspan="1"><code>0x46 (70)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyG"</code></th> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + <td colspan="3" rowspan="1"><code>0x47 (71)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyH"</code></th> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + <td colspan="3" rowspan="1"><code>0x48 (72)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyI"</code></th> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + <td colspan="3" rowspan="1"><code>0x49 (73)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyJ"</code></th> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + <td colspan="3" rowspan="1"><code>0x4A (74)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyK"</code></th> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + <td colspan="3" rowspan="1"><code>0x4B (75)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyL"</code></th> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + <td colspan="3" rowspan="1"><code>0x4C (76)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyM"</code></th> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + <td colspan="3" rowspan="1"><code>0x4D (77)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyN"</code></th> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + <td colspan="3" rowspan="1"><code>0x4E (78)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyO"</code></th> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + <td colspan="3" rowspan="1"><code>0x4F (79)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyP"</code></th> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + <td colspan="3" rowspan="1"><code>0x50 (80)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyQ"</code></th> + <td colspan="3" rowspan="1"><code>0x51 (81)</code></td> + <td colspan="3" rowspan="1"><code>0x51 (81)</code></td> + <td rowspan="1"><code>0x51 (81)</code></td> + <td rowspan="1"><code>0x51 (81)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td><code>0x51 (81)</code></td> + <td><code>0x51 (81)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td rowspan="1"><code>0x51 (81)</code></td> + <td rowspan="1"><code>0x51 (81)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="3" rowspan="1"><code>0x51 (81)</code></td> + <td><code>0x51 (81)</code></td> + <td><code>0x51 (81)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="3" rowspan="1"><code>0x51 (81)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyR"</code></th> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + <td colspan="3" rowspan="1"><code>0x52 (82)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyS"</code></th> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + <td colspan="3" rowspan="1"><code>0x53 (83)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyT"</code></th> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + <td colspan="3" rowspan="1"><code>0x54 (84)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyU"</code></th> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + <td colspan="3" rowspan="1"><code>0x55 (85)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyV"</code></th> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + <td colspan="3" rowspan="1"><code>0x56 (86)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyW"</code></th> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + <td colspan="3" rowspan="1"><code>0x57 (87)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyX"</code></th> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + <td colspan="3" rowspan="1"><code>0x58 (88)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyY"</code></th> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + <td colspan="3" rowspan="1"><code>0x59 (89)</code></td> + </tr> + <tr> + <th scope="row"><code>"KeyZ"</code></th> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + <td colspan="3" rowspan="1"><code>0x5A (90)</code></td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by printable keys in standard position (punctuations in US layout):</caption> + <thead> + <tr> + <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th> + <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th> + <th colspan="3" rowspan="1" scope="col">Chromium 34</th> + <th colspan="3" rowspan="1" scope="col">Safari 7</th> + <th colspan="9" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Windows (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th colspan="1" scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="3" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + <th colspan="1" scope="col">US</th> + <th scope="col">Japanese</th> + <th scope="col">Greek</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Windows</th> + <th colspan="3" rowspan="1" scope="col">Mac (10.9)</th> + <th colspan="3" rowspan="1" scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th colspan="3" rowspan="1" scope="col">Internet Explorer 11</th> + <th colspan="6" rowspan="1" scope="col">Google Chrome 34</th> + <th colspan="3" rowspan="1" scope="col">Chromium 34</th> + <th colspan="3" rowspan="1" scope="col">Safari 7</th> + <th colspan="9" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"Comma"</code></th> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + <td colspan="3" rowspan="2"><code>0xBC (188)</code></td> + </tr> + <tr> + <th scope="row"><code>"Comma"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Period"</code></th> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + <td colspan="3" rowspan="2"><code>0xBE (190)</code></td> + </tr> + <tr> + <th scope="row"><code>"Period"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Semicolon"</code></th> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td><code>0xBA (186)</code> *1</td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *2</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td><code>0xBA (186)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *3</code></td> + <td colspan="1" rowspan="2"><code>0xBA (186)</code></td> + <td><code>0xBA (186)</code> *1</td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 (229) *2</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code> *1</td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td colspan="1" rowspan="2"><code>0x3B (59)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + </tr> + <tr> + <th scope="row"><code>"Semicolon"</code> with <kbd>Shift</kbd></th> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187) </code>*1</td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code> *1</td> + </tr> + <tr> + <th scope="row"><code>"Quote"</code></th> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186) *1</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBA (186)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x3A (58)</code></td> + <td colspan="1" rowspan="2"><code>0xDE (222)</code></td> + </tr> + <tr> + <th scope="row"><code>"Quote"</code> with Shift</th> + <td style="background-color: rgb(255, 204, 255);"><code>0xDE (222)</code> *1</td> + <td style="background-color: rgb(255, 204, 255);"><code>0x38 (56)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xDE (222)</code> *1</td> + </tr> + <tr> + <th scope="row"><code>"BracketLeft"</code></th> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xC0(192)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xC0(192)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td><code>0xDB (219)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x32 (50)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td><code>0xDB (219) *1 </code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x40 (64)</code></td> + <td colspan="1" rowspan="2"><code>0xDB (219)</code></td> + </tr> + <tr> + <th scope="row"><code>"BracketLeft"</code> with <kbd>Shift</kbd></th> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xC0 (192)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td> + </tr> + <tr> + <th scope="row"><code>"BracketRight"</code></th> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219) *1</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219) *1</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDB (219)</code></td> + <td colspan="1" rowspan="2"><code>0xDD (221)</code></td> + </tr> + <tr> + <th scope="row"><code>"BracketRight"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Backquote"</code></th> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xF4 (244)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(153, 153, 153);"><code>N/A</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="3" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0xC0 (192)</code></td> + </tr> + <tr> + <th scope="row"><code>"Backquote"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Backslash"</code></th> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="3" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="3" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="3" rowspan="2"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDD (221)</code></td> + <td colspan="1" rowspan="2"><code>0xDC (220)</code></td> + </tr> + <tr> + <th scope="row"><code>"Backslash"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"Minus"</code></th> + <td colspan="3" rowspan="2"><code>0xBD (189)</code></td> + <td colspan="3" rowspan="2"><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td><code>0xBD (189)</code> *1</td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td rowspan="1"><code>0xBD (189)</code></td> + <td rowspan="1"><code>0xBD (189) *1</code></td> + <td rowspan="1"><code>0xBD (189)</code></td> + <td colspan="3" rowspan="2"><code>0xAD (173)</code></td> + <td rowspan="2"><code>0xAD (173)</code></td> + <td rowspan="2"><code>0xAD (173) *1</code></td> + <td rowspan="2"><code>0xAD (173)</code></td> + <td colspan="3" rowspan="2"><code>0xAD (173)</code></td> + </tr> + <tr> + <th scope="row"><code>"Minus"</code> with <kbd>Shift</kbd></th> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code> *1</td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187)</code></td> + <td><code>0xBD (189)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBB (187) *1</code></td> + <td><code>0xBD (189)</code></td> + </tr> + <tr> + <th scope="row"><code>"Equal"</code></th> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDE (222)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td><code>0xBB (187) *1</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x36 (54)</code></td> + <td colspan="1" rowspan="2"><code>0xBB (187)</code></td> + <td rowspan="1"><code>0xBB (187)</code></td> + <td rowspan="1"><code>0xBB (187) *1</code></td> + <td rowspan="1"><code>0xBB (187)</code></td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code></td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code> *1</td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + <td rowspan="2"><code>0x3D (61)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xA0 (160)</code></td> + <td colspan="1" rowspan="2"><code>0x3D (61)</code></td> + </tr> + <tr> + <th scope="row"><code>"Equal"</code> with <kbd>Shift</kbd></th> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192)</code></td> + <td><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xC0 (192) *1</code></td> + <td><code>0xBB (187)</code></td> + </tr> + <tr> + <th scope="row"><code>"IntlRo"</code></th> + <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE2 (226)</code></td> + <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td> + <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE2 (226)</code></td> + <td colspan="1" rowspan="2"><code>0xC1 (193)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2"><code>0xBD (189)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2">*4</td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code><br> + </td> + <td colspan="1" rowspan="2">*4</td> + <td rowspan="2"><code>0xBD (189)</code></td> + <td rowspan="2"><code>0xBD (189)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 </code>(229) *5</td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0xA7 (167)</code></td> + <td colspan="1" rowspan="2"><code>0xA7 (167)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + </tr> + <tr> + <th scope="row"><code>"IntlRo"</code> with <kbd>Shift</kbd></th> + </tr> + <tr> + <th scope="row"><code>"IntlYen"</code></th> + <td colspan="1" rowspan="2"><code>0xFF (255)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xFF (255)</code></td> + <td colspan="1" rowspan="2"><code>0xFF (255)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0xFF (255)</code></td> + <td><code>0x00 (0)</code></td> + <td><code>0x00 (0)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2">*4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2">*4</td> + <td rowspan="1"><code>0x00 (0)</code></td> + <td rowspan="1"><code>0x00 (0)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xE5 </code>(229) *5</td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC </code>(220)</td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0xDC </code>(220)</td> + <td colspan="1" rowspan="2"><code>0xDC </code>(220)</td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + <td rowspan="2" style="background-color: rgb(255, 255, 204);"><code>0xDC (220)</code></td> + <td colspan="1" rowspan="2"><code>0x00 (0)</code></td> + </tr> + <tr> + <th scope="row"><code>"IntlYen"</code> with <kbd>Shift</kbd></th> + <td><code>0xDC (220)</code></td> + <td><code>0xDC (220)</code></td> + <td style="background-color: rgb(255, 204, 255);"><code>0xBD (189)</code></td> + <td><code>0xDC (220)</code></td> + <td><code>0xDC (220)</code></td> + </tr> + </tbody> +</table> + +<p>*1 The value is input from JIS keyboard. When you use ANSI keyboard, the keyCode value and inputted character are what you select from the US keyboard layout.</p> + +<p>*2 The key is a dead key. The value of <code>keyup</code> event is <code>0xBA (186)</code>.</p> + +<p>*3 The key is a dead key. The value of <code>keyup</code> event is <code>0x10 (16)</code>.</p> + +<p>*4 No key events are fired.</p> + +<p>*5 The key isn't available with Greek keyboard layout (does not input any character). The value of <code>keyup</code> event is <code>0x00 (0)</code>.</p> + +<h3 id="Non-printable_keys_function_keys">Non-printable keys (function keys)</h3> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by modifier keys:</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"AltLeft"</code></th> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + </tr> + <tr> + <th scope="row"><code>"AltRight"</code></th> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + <td><code>0x12 (18)</code></td> + </tr> + <tr> + <th scope="row"><code>"AltRight"</code> when it's <code>"AltGraph"</code> key</th> + <td>*1</td> + <td>*1</td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE1 (225)</code></td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td>*1</td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE1 (225)</code></td> + </tr> + <tr> + <th scope="row"><code>"CapsLock"</code></th> + <td><code>0x14 (20)</code> *2</td> + <td><code>0x14 (20)</code> *2</td> + <td><code>0x14 (20)</code></td> + <td><code>0x14 (20)</code></td> + <td><code>0x14 (20)</code></td> + <td><code>0x14 (20)</code> *2</td> + <td><code>0x14 (20)</code></td> + <td><code>0x14 (20)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"ControlLeft"</code></th> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + </tr> + <tr> + <th scope="row"><code>"ControlRight"</code></th> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + <td><code>0x11 (17)</code></td> + </tr> + <tr> + <th scope="row"><code>"OSLeft"</code></th> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td><code>0x5B (91)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE0 (224)</code></td> + <td><code>0x5B (91)</code></td> + </tr> + <tr> + <th scope="row"><code>"OSRight"</code></th> + <td><code>0x5C (92)</code></td> + <td><code>0x5C (92)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x5D (93)</code></td> + <td><code>0x5C (92)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x5D (93)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x5B (91)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE0 (224)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x5B (91)</code></td> + </tr> + <tr> + <th scope="row"><code>"ShiftLeft"</code></th> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + </tr> + <tr> + <th scope="row"><code>"ShiftRight"</code></th> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + <td><code>0x10 (16)</code></td> + </tr> + </tbody> +</table> + +<p>*1 On Windows, <code>"AltGraph"</code> key causes <code>"ControlLeft"</code> key event and <code>"AltRight"</code> key event.</p> + +<p>*2 When Japanese keyboard layout is active, <code>"CapsLock"</code> key without <kbd>Shift</kbd> causes <code>0xF0 (240)</code>. The key works as <code>"Alphanumeric"</code> key whose label is "英数".</p> + +<p>*3 When Japanese keyboard layout is active, <code>"CapsLock"</code> key without <kbd>Shift</kbd> causes <code>0x00 (0)</code>. The key works as <code>"Alphanumeric"</code> key whose label is <code>"英数"</code>.</p> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by non-printable keys:</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"ContextMenu"</code></th> + <td><code>0x5D (93)</code></td> + <td><code>0x5D (93)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *1</td> + <td><code>0x5D (93)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *1</td> + <td><code>0x5D (93)</code></td> + <td><code>0x5D (93)</code></td> + <td><code>0x5D (93)</code></td> + </tr> + <tr> + <th scope="row"><code>"Enter"</code></th> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + </tr> + <tr> + <th scope="row"><code>"Space"</code></th> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + <td><code>0x20 (32)</code></td> + </tr> + <tr> + <th scope="row"><code>"Tab"</code></th> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + <td><code>0x09 (9)</code></td> + </tr> + <tr> + <th scope="row"><code>"Delete"</code></th> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + </tr> + <tr> + <th scope="row"><code>"End"</code></th> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + </tr> + <tr> + <th scope="row"><code>"Help"</code></th> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2F (47)</code> *3</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td> + <td style="background-color: rgb(153, 153, 153);">N/A</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2D (45)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x06 (6)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"Home"</code></th> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + </tr> + <tr> + <th scope="row"><code>"Insert"</code></th> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + </tr> + <tr> + <th scope="row"><code>"PageDown"</code></th> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + </tr> + <tr> + <th scope="row"><code>"PageUp"</code></th> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + </tr> + <tr> + <th scope="row"><code>"ArrowDown"</code></th> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + </tr> + <tr> + <th scope="row"><code>"ArrowLeft"</code></th> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + </tr> + <tr> + <th scope="row"><code>"ArrowRight"</code></th> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + </tr> + <tr> + <th scope="row"><code>"ArrowUp"</code></th> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + </tr> + <tr> + <th scope="row"><code>"Escape"</code></th> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + <td><code>0x1B (27)</code></td> + </tr> + <tr> + <th scope="row"><code>"PrintScreen"</code></th> + <td><code>0x2C (44)</code> *4</td> + <td><code>0x2C (44)</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7C (124)</code>*5</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2A (42)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7C (124)</code>*5</td> + <td><code>0x2C (44)</code> *4</td> + <td><code>0x2C (44)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2A (42)</code></td> + </tr> + <tr> + <th scope="row"><code>"ScrollLock"</code></th> + <td><code>0x91 (145)</code></td> + <td><code>0x91 (145)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7D (125)</code>*5</td> + <td><code>0x91 (145)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7D (125)</code>*5</td> + <td><code>0x91 (145)</code></td> + <td><code>0x91 (145)</code></td> + <td><code>0x91 (145)</code></td> + </tr> + <tr> + <th scope="row"><code>"Pause"</code></th> + <td><code>0x13 (19)</code> *6</td> + <td><code>0x13 (19)</code> *6</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7E (126)</code>*5</td> + <td><code>0x13 (19)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x7E (126)</code>*5</td> + <td><code>0x13 (19)</code> *6</td> + <td><code>0x13 (19)</code></td> + <td><code>0x13 (19)</code></td> + </tr> + </tbody> +</table> + +<p>*1 keypress event is fired whose <code>keyCode</code> and <code>charCode</code> are <code>0x10 (16)</code> but text isn't inputted into editor.</p> + +<p>*2 On Mac, <code>"Help"</code> key is mapped to <code>"Insert"</code> key of PC keyboard. These <code>keyCode</code> values are the same as the <code>"Insert"</code> key's <code>keyCode</code> value.</p> + +<p>*3 Tested on Fedora 20.</p> + +<p>*4 Only <code>keyup</code> event is fired.</p> + +<p>*5 PC's <code>"PrintScreen"</code>, <code>"ScrollLock"</code> and <code>"Pause"</code> are mapped to Mac's <code>"F13"</code>, <code>"F14"</code> and <code>"F15"</code>. Chrome and Safari map same <code>keyCode</code> values with Mac's keys.</p> + +<p>*6 <code>"Pause"</code> key with <kbd>Control</kbd> causes <code>0x03 (3)</code>.</p> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by function keys:</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"F1"</code></th> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + <td><code>0x70 (112)</code></td> + </tr> + <tr> + <th scope="row"><code>"F2"</code></th> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + <td><code>0x71 (113)</code></td> + </tr> + <tr> + <th scope="row"><code>"F3"</code></th> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + <td><code>0x72 (114)</code></td> + </tr> + <tr> + <th scope="row"><code>"F4"</code></th> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + <td><code>0x73 (115)</code></td> + </tr> + <tr> + <th scope="row"><code>"F5"</code></th> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + <td><code>0x74 (116)</code></td> + </tr> + <tr> + <th scope="row"><code>"F6"</code></th> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + <td><code>0x75 (117)</code></td> + </tr> + <tr> + <th scope="row"><code>"F7"</code></th> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + <td><code>0x76 (118)</code></td> + </tr> + <tr> + <th scope="row"><code>"F8"</code></th> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + <td><code>0x77 (119)</code></td> + </tr> + <tr> + <th scope="row"><code>"F9"</code></th> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + <td><code>0x78 (120)</code></td> + </tr> + <tr> + <th scope="row"><code>"F10"</code></th> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + <td><code>0x79 (121)</code></td> + </tr> + <tr> + <th scope="row"><code>"F11"</code></th> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + <td><code>0x7A (122)</code></td> + </tr> + <tr> + <th scope="row"><code>"F12"</code></th> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + <td><code>0x7B (123)</code></td> + </tr> + <tr> + <th scope="row"><code>"F13"</code></th> + <td><code>0x7C (124)</code></td> + <td><code>0x7C (124)</code></td> + <td><code>0x7C (124)</code></td> + <td><code>0x7C (124)</code> *1</td> + <td><code>0x7C (124)</code></td> + <td><code>0x7C (124)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x2C (44)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F14"</code></th> + <td><code>0x7D (125)</code></td> + <td><code>0x7D (125)</code></td> + <td><code>0x7D (125)</code></td> + <td><code>0x7D (125)</code> *1</td> + <td><code>0x7D (125)</code></td> + <td><code>0x7D (125)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x91 (145)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F15"</code></th> + <td><code>0x7E (126)</code></td> + <td><code>0x7E (126)</code></td> + <td><code>0x7E (126)</code></td> + <td><code>0x7E (126)</code> *1</td> + <td><code>0x7E (126)</code></td> + <td><code>0x7E (126)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x13 (19)</code> *2</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F16"</code></th> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code> *1</td> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code></td> + <td><code>0x7F (127)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F17"</code></th> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code> *1</td> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code></td> + <td><code>0x80 (128)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F18"</code></th> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code> *1</td> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code></td> + <td><code>0x81 (129)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F19"</code></th> + <td><code>0x82 (130)</code></td> + <td><code>0x82 (130)</code></td> + <td><code>0x82 (130)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td><code>0x82 (130)</code></td> + <td><code>0x82 (130)</code></td> + <td><code>0x82 (130)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + <tr> + <th scope="row"><code>"F20"</code></th> + <td><code>0x83 (131)</code></td> + <td><code>0x83 (131)</code></td> + <td><code>0x83 (131)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xE5 (229)</code> *5</td> + <td><code>0x83 (131)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td> + </tr> + <tr> + <th scope="row"><code>"F21"</code></th> + <td><code>0x84 (132)</code></td> + <td><code>0x84 (132)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td><code>0x84 (132)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td> + </tr> + <tr> + <th scope="row"><code>"F22"</code></th> + <td><code>0x85 (133)</code></td> + <td><code>0x85 (133)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td><code>0x85 (133)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td> + </tr> + <tr> + <th scope="row"><code>"F23"</code></th> + <td><code>0x86 (134)</code></td> + <td><code>0x86 (134)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td><code>0x86 (134)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *6</td> + </tr> + <tr> + <th scope="row"><code>"F24"</code></th> + <td><code>0x87 (135)</code></td> + <td><code>0x87 (135)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *4</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *7</td> + <td><code>0x87 (135)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>N/A</code> *8</td> + <td style="background-color: rgb(255, 255, 204);"><code>0x00 (0)</code> *3</td> + </tr> + </tbody> +</table> + +<p>*1 Tested on Fedora 20.</p> + +<p>*2 PC's <code>"PrintScreen"</code>, <code>"ScrollLock"</code> and <code>"Pause"</code> are mapped to <code>Mac's "F13"</code>, <code>"F14"</code> and <code>"F15"</code>. Firefox maps same <code>keyCode</code> values with PC's keys.</p> + +<p>*3 Tested on Fedora 20. The keys don't cause <code>GDK_Fxx</code> keysyms. If the keys cause proper keysyms, these values must be same as IE.</p> + +<p>*4 Tested on Fedora 20. The keys don't cause DOM key events on Chromium.</p> + +<p>*5 <code>keyUp</code> event's keyCode value is <code>0x83 (131)</code>.</p> + +<p>*6 Tested on Fedora 20. The keys don't cause DOM key events on Firefox.</p> + +<p>*7 Only <code>keydown</code> event is fired.</p> + +<p>*8 No DOM key events are fired on Firefox.</p> + +<h3 id="Numpad_keys">Numpad keys</h3> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by keys in numpad in NumLock state</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Windows</th> + <th scope="col">Mac (10.9)</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="2" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th scope="col">Safari 7</th> + <th colspan="3" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"NumLock"</code></th> + <td><code>0x90 (144)</code></td> + <td><code>0x90 (144)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td> + <td><code>0x90 (144)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td> + <td><code>0x90 (144)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x0C (12)</code> *1</td> + <td><code>0x90 (144)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad0"</code></th> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + <td><code>0x60 (96)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad1"</code></th> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + <td><code>0x61 (97)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad2"</code></th> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + <td><code>0x62 (98)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad3"</code></th> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + <td><code>0x63 (99)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad4"</code></th> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + <td><code>0x64 (100)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad5"</code></th> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + <td><code>0x65 (101)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad6"</code></th> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + <td><code>0x66 (102)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad7"</code></th> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + <td><code>0x67 (103)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad8"</code></th> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + <td><code>0x68 (104)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad9"</code></th> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + <td><code>0x69 (105)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadAdd"</code></th> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + <td><code>0x6B (107)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadComma"</code> inputting <code>","</code></th> + <td><code>0xC2 (194)</code></td> + <td><code>0xC2 (194)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBC (188)</code></td> + <td style="background-color: rgb(153, 153, 153);"><code>Always inputs </code>"."</td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBC (188)</code></td> + <td><code>0xC2 (194)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td> + <td style="background-color: rgb(153, 153, 153);"><code>Always inputs </code>"."</td> + </tr> + <tr> + <th scope="row"><code>"NumpadComma"</code> inputting <code>"."</code> or empty string</th> + <td><code>0xC2 (194)</code></td> + <td><code>0xC2 (194)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBE (190)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6E (110)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBE (190)</code></td> + <td><code>0xC2 (194)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6E (110)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadDecimal"</code> inputting <code>"."</code></th> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadDecimal"</code> inputting <code>","</code></th> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td><code>0x6E (110)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x6C (108)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadDivide"</code></th> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + <td><code>0x6F (111)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadEnter"</code></th> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + <td><code>0x0D (13)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadEqual"</code></th> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0xBB (187)</code></td> + <td><code>0x0C (12)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x3D (61)</code></td> + <td style="background-color: rgb(255, 255, 204);"><code>0x3D (61)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadMultiply"</code></th> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + <td><code>0x6A (106)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadSubtract"</code></th> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + <td><code>0x6D (109)</code></td> + </tr> + </tbody> +</table> + +<p>*1 <code>"NumLock"</code> key works as <code>"Clear"</code> key on Mac.</p> + +<table class="standard-table"> + <caption>keyCode values of each browser's keydown event caused by keys in numpad without NumLock state</caption> + <thead> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Internet Explorer 11</th> + <th colspan="1" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th colspan="2" rowspan="1" scope="col">Gecko 29</th> + </tr> + <tr> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Windows</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + </thead> + <tfoot> + <tr> + <th colspan="1" rowspan="2" scope="row">{{domxref("KeyboardEvent.code")}}</th> + <th scope="col">Windows</th> + <th scope="col">Windows</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + <th scope="col">Windows</th> + <th scope="col">Linux (Ubuntu 14.04)</th> + </tr> + <tr> + <th scope="col">Internet Explorer 11</th> + <th colspan="1" rowspan="1" scope="col">Google Chrome 34</th> + <th scope="col">Chromium 34</th> + <th colspan="2" rowspan="1" scope="col">Gecko 29</th> + </tr> + </tfoot> + <tbody> + <tr> + <th scope="row"><code>"Numpad0"</code> (<code>"Insert"</code>)</th> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + <td><code>0x2D (45)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad1"</code> (<code>"End"</code>)</th> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + <td><code>0x23 (35)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad2"</code> (<code>"ArrowDown"</code>)</th> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + <td><code>0x28 (40)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad3"</code> (<code>"PageDown"</code>)</th> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + <td><code>0x22 (34)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad4"</code> (<code>"ArrowLeft"</code>)</th> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + <td><code>0x25 (37)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad5"</code></th> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + <td><code>0x0C (12)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad6"</code> (<code>"ArrowRight"</code>)</th> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + <td><code>0x27 (39)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad7"</code> (<code>"Home"</code>)</th> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + <td><code>0x24 (36)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad8"</code> (<code>"ArrowUp"</code>)</th> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + <td><code>0x26 (38)</code></td> + </tr> + <tr> + <th scope="row"><code>"Numpad9"</code> (<code>"PageUp"</code>)</th> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + <td><code>0x21 (33)</code></td> + </tr> + <tr> + <th scope="row"><code>"NumpadDecimal"</code> (<code>"Delete"</code>)</th> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + <td><code>0x2E (46)</code></td> + </tr> + </tbody> +</table> + +<p>* Recent Mac doesn't have <code>"NumLock"</code> key and state. Therefore, unlocked state isn't available.</p> + +<h2 id="Constants_for_keyCode_value">Constants for keyCode value</h2> + +<p>Gecko defines a lot of <code>keyCode</code> values in <code>KeyboardEvent</code> for making the mapping table explicitly. These values are useful for add-on developers of Firefox, but not so useful in public web pages.</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Constant</td> + <td class="header">Value</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>DOM_VK_CANCEL</code></td> + <td style="white-space: nowrap;">0x03 (3)</td> + <td>Cancel key.</td> + </tr> + <tr> + <td><code>DOM_VK_HELP</code></td> + <td style="white-space: nowrap;">0x06 (6)</td> + <td>Help key.</td> + </tr> + <tr> + <td><code>DOM_VK_BACK_SPACE</code></td> + <td style="white-space: nowrap;">0x08 (8)</td> + <td>Backspace key.</td> + </tr> + <tr> + <td><code>DOM_VK_TAB</code></td> + <td style="white-space: nowrap;">0x09 (9)</td> + <td>Tab key.</td> + </tr> + <tr> + <td><code>DOM_VK_CLEAR</code></td> + <td style="white-space: nowrap;">0x0C (12)</td> + <td>"5" key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key.</td> + </tr> + <tr> + <td><code>DOM_VK_RETURN</code></td> + <td style="white-space: nowrap;">0x0D (13)</td> + <td>Return/enter key on the main keyboard.</td> + </tr> + <tr> + <td><code>DOM_VK_ENTER</code></td> + <td style="white-space: nowrap;">0x0E (14)</td> + <td>Reserved, but not used. <code> </code><code>{{obsolete_inline(30)}} </code>(Dropped, see {{bug(969247)}}.)</td> + </tr> + <tr> + <td><code>DOM_VK_SHIFT</code></td> + <td style="white-space: nowrap;">0x10 (16)</td> + <td>Shift key.</td> + </tr> + <tr> + <td><code>DOM_VK_CONTROL</code></td> + <td style="white-space: nowrap;">0x11 (17)</td> + <td>Control key.</td> + </tr> + <tr> + <td><code>DOM_VK_ALT</code></td> + <td style="white-space: nowrap;">0x12 (18)</td> + <td>Alt (Option on Mac) key.</td> + </tr> + <tr> + <td><code>DOM_VK_PAUSE</code></td> + <td style="white-space: nowrap;">0x13 (19)</td> + <td>Pause key.</td> + </tr> + <tr> + <td><code>DOM_VK_CAPS_LOCK</code></td> + <td style="white-space: nowrap;">0x14 (20)</td> + <td>Caps lock.</td> + </tr> + <tr> + <td><code>DOM_VK_KANA</code></td> + <td style="white-space: nowrap;">0x15 (21)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_HANGUL</code></td> + <td style="white-space: nowrap;">0x15 (21)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_EISU</code></td> + <td style="white-space: nowrap;">0x 16 (22)</td> + <td>"英数" key on Japanese Mac keyboard. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_JUNJA</code></td> + <td style="white-space: nowrap;">0x17 (23)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_FINAL</code></td> + <td style="white-space: nowrap;">0x18 (24)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_HANJA</code></td> + <td style="white-space: nowrap;">0x19 (25)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_KANJI</code></td> + <td style="white-space: nowrap;">0x19 (25)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_ESCAPE</code></td> + <td style="white-space: nowrap;">0x1B (27)</td> + <td>Escape key.</td> + </tr> + <tr> + <td><code>DOM_VK_CONVERT</code></td> + <td style="white-space: nowrap;">0x1C (28)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_NONCONVERT</code></td> + <td style="white-space: nowrap;">0x1D (29)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_ACCEPT</code></td> + <td style="white-space: nowrap;">0x1E (30)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_MODECHANGE</code></td> + <td style="white-space: nowrap;">0x1F (31)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_SPACE</code></td> + <td style="white-space: nowrap;">0x20 (32)</td> + <td>Space bar.</td> + </tr> + <tr> + <td><code>DOM_VK_PAGE_UP</code></td> + <td style="white-space: nowrap;">0x21 (33)</td> + <td>Page Up key.</td> + </tr> + <tr> + <td><code>DOM_VK_PAGE_DOWN</code></td> + <td style="white-space: nowrap;">0x22 (34)</td> + <td>Page Down key.</td> + </tr> + <tr> + <td><code>DOM_VK_END</code></td> + <td style="white-space: nowrap;">0x23 (35)</td> + <td>End key.</td> + </tr> + <tr> + <td><code>DOM_VK_HOME</code></td> + <td style="white-space: nowrap;">0x24 (36)</td> + <td>Home key.</td> + </tr> + <tr> + <td><code>DOM_VK_LEFT</code></td> + <td style="white-space: nowrap;">0x25 (37)</td> + <td>Left arrow.</td> + </tr> + <tr> + <td><code>DOM_VK_UP</code></td> + <td style="white-space: nowrap;">0x26 (38)</td> + <td>Up arrow.</td> + </tr> + <tr> + <td><code>DOM_VK_RIGHT</code></td> + <td style="white-space: nowrap;">0x27 (39)</td> + <td>Right arrow.</td> + </tr> + <tr> + <td><code>DOM_VK_DOWN</code></td> + <td style="white-space: nowrap;">0x28 (40)</td> + <td>Down arrow.</td> + </tr> + <tr> + <td><code>DOM_VK_SELECT</code></td> + <td style="white-space: nowrap;">0x29 (41)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_PRINT</code></td> + <td style="white-space: nowrap;">0x2A (42)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_EXECUTE</code></td> + <td style="white-space: nowrap;">0x2B (43)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_PRINTSCREEN</code></td> + <td style="white-space: nowrap;">0x2C (44)</td> + <td>Print Screen key.</td> + </tr> + <tr> + <td><code>DOM_VK_INSERT</code></td> + <td style="white-space: nowrap;">0x2D (45)</td> + <td>Ins(ert) key.</td> + </tr> + <tr> + <td><code>DOM_VK_DELETE</code></td> + <td style="white-space: nowrap;">0x2E (46)</td> + <td>Del(ete) key.</td> + </tr> + <tr> + <td><code>DOM_VK_0</code></td> + <td style="white-space: nowrap;">0x30 (48)</td> + <td>"0" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_1</code></td> + <td style="white-space: nowrap;">0x31 (49)</td> + <td>"1" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_2</code></td> + <td style="white-space: nowrap;">0x32 (50)</td> + <td>"2" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_3</code></td> + <td style="white-space: nowrap;">0x33 (51)</td> + <td>"3" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_4</code></td> + <td style="white-space: nowrap;">0x34 (52)</td> + <td>"4" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_5</code></td> + <td style="white-space: nowrap;">0x35 (53)</td> + <td>"5" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_6</code></td> + <td style="white-space: nowrap;">0x36 (54)</td> + <td>"6" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_7</code></td> + <td style="white-space: nowrap;">0x37 (55)</td> + <td>"7" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_8</code></td> + <td style="white-space: nowrap;">0x38 (56)</td> + <td>"8" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_9</code></td> + <td style="white-space: nowrap;">0x39 (57)</td> + <td>"9" key in standard key location.</td> + </tr> + <tr> + <td><code>DOM_VK_COLON</code></td> + <td style="white-space: nowrap;">0x3A (58)</td> + <td>Colon (":") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_SEMICOLON</code></td> + <td style="white-space: nowrap;">0x3B (59)</td> + <td>Semicolon (";") key.</td> + </tr> + <tr> + <td><code>DOM_VK_LESS_THAN</code></td> + <td style="white-space: nowrap;">0x3C (60)</td> + <td>Less-than ("<") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_EQUALS</code></td> + <td style="white-space: nowrap;">0x3D (61)</td> + <td>Equals ("=") key.</td> + </tr> + <tr> + <td><code>DOM_VK_GREATER_THAN</code></td> + <td style="white-space: nowrap;">0x3E (62)</td> + <td>Greater-than (">") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_QUESTION_MARK</code></td> + <td style="white-space: nowrap;">0x3F (63)</td> + <td>Question mark ("?") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_AT</code></td> + <td style="white-space: nowrap;">0x40 (64)</td> + <td>Atmark ("@") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_A</code></td> + <td style="white-space: nowrap;">0x41 (65)</td> + <td>"A" key.</td> + </tr> + <tr> + <td><code>DOM_VK_B</code></td> + <td style="white-space: nowrap;">0x42 (66)</td> + <td>"B" key.</td> + </tr> + <tr> + <td><code>DOM_VK_C</code></td> + <td style="white-space: nowrap;">0x43 (67)</td> + <td>"C" key.</td> + </tr> + <tr> + <td><code>DOM_VK_D</code></td> + <td style="white-space: nowrap;">0x44 (68)</td> + <td>"D" key.</td> + </tr> + <tr> + <td><code>DOM_VK_E</code></td> + <td style="white-space: nowrap;">0x45 (69)</td> + <td>"E" key.</td> + </tr> + <tr> + <td><code>DOM_VK_F</code></td> + <td style="white-space: nowrap;">0x46 (70)</td> + <td>"F" key.</td> + </tr> + <tr> + <td><code>DOM_VK_G</code></td> + <td style="white-space: nowrap;">0x47 (71)</td> + <td>"G" key.</td> + </tr> + <tr> + <td><code>DOM_VK_H</code></td> + <td style="white-space: nowrap;">0x48 (72)</td> + <td>"H" key.</td> + </tr> + <tr> + <td><code>DOM_VK_I</code></td> + <td style="white-space: nowrap;">0x49 (73)</td> + <td>"I" key.</td> + </tr> + <tr> + <td><code>DOM_VK_J</code></td> + <td style="white-space: nowrap;">0x4A (74)</td> + <td>"J" key.</td> + </tr> + <tr> + <td><code>DOM_VK_K</code></td> + <td style="white-space: nowrap;">0x4B (75)</td> + <td>"K" key.</td> + </tr> + <tr> + <td><code>DOM_VK_L</code></td> + <td style="white-space: nowrap;">0x4C (76)</td> + <td>"L" key.</td> + </tr> + <tr> + <td><code>DOM_VK_M</code></td> + <td style="white-space: nowrap;">0x4D (77)</td> + <td>"M" key.</td> + </tr> + <tr> + <td><code>DOM_VK_N</code></td> + <td style="white-space: nowrap;">0x4E (78)</td> + <td>"N" key.</td> + </tr> + <tr> + <td><code>DOM_VK_O</code></td> + <td style="white-space: nowrap;">0x4F (79)</td> + <td>"O" key.</td> + </tr> + <tr> + <td><code>DOM_VK_P</code></td> + <td style="white-space: nowrap;">0x50 (80)</td> + <td>"P" key.</td> + </tr> + <tr> + <td><code>DOM_VK_Q</code></td> + <td style="white-space: nowrap;">0x51 (81)</td> + <td>"Q" key.</td> + </tr> + <tr> + <td><code>DOM_VK_R</code></td> + <td style="white-space: nowrap;">0x52 (82)</td> + <td>"R" key.</td> + </tr> + <tr> + <td><code>DOM_VK_S</code></td> + <td style="white-space: nowrap;">0x53 (83)</td> + <td>"S" key.</td> + </tr> + <tr> + <td><code>DOM_VK_T</code></td> + <td style="white-space: nowrap;">0x54 (84)</td> + <td>"T" key.</td> + </tr> + <tr> + <td><code>DOM_VK_U</code></td> + <td style="white-space: nowrap;">0x55 (85)</td> + <td>"U" key.</td> + </tr> + <tr> + <td><code>DOM_VK_V</code></td> + <td style="white-space: nowrap;">0x56 (86)</td> + <td>"V" key.</td> + </tr> + <tr> + <td><code>DOM_VK_W</code></td> + <td style="white-space: nowrap;">0x57 (87)</td> + <td>"W" key.</td> + </tr> + <tr> + <td><code>DOM_VK_X</code></td> + <td style="white-space: nowrap;">0x58 (88)</td> + <td>"X" key.</td> + </tr> + <tr> + <td><code>DOM_VK_Y</code></td> + <td style="white-space: nowrap;">0x59 (89)</td> + <td>"Y" key.</td> + </tr> + <tr> + <td><code>DOM_VK_Z</code></td> + <td style="white-space: nowrap;">0x5A (90)</td> + <td>"Z" key.</td> + </tr> + <tr> + <td><code>DOM_VK_WIN</code></td> + <td style="white-space: nowrap;">0x5B (91)</td> + <td>Windows logo key on Windows. Or Super or Hyper key on Linux. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CONTEXT_MENU</code></td> + <td style="white-space: nowrap;">0x5D (93)</td> + <td>Opening context menu key.</td> + </tr> + <tr> + <td><code>DOM_VK_SLEEP</code></td> + <td style="white-space: nowrap;">0x5F (95)</td> + <td>Linux support for this keycode was added in Gecko 4.0.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD0</code></td> + <td style="white-space: nowrap;">0x60 (96)</td> + <td>"0" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD1</code></td> + <td style="white-space: nowrap;">0x61 (97)</td> + <td>"1" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD2</code></td> + <td style="white-space: nowrap;">0x62 (98)</td> + <td>"2" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD3</code></td> + <td style="white-space: nowrap;">0x63 (99)</td> + <td>"3" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD4</code></td> + <td style="white-space: nowrap;">0x64 (100)</td> + <td>"4" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD5</code></td> + <td style="white-space: nowrap;">0x65 (101)</td> + <td>"5" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD6</code></td> + <td style="white-space: nowrap;">0x66 (102)</td> + <td>"6" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD7</code></td> + <td style="white-space: nowrap;">0x67 (103)</td> + <td>"7" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD8</code></td> + <td style="white-space: nowrap;">0x68 (104)</td> + <td>"8" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_NUMPAD9</code></td> + <td style="white-space: nowrap;">0x69 (105)</td> + <td>"9" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_MULTIPLY</code></td> + <td style="white-space: nowrap;">0x6A (106)</td> + <td>"*" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_ADD</code></td> + <td style="white-space: nowrap;">0x6B (107)</td> + <td>"+" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_SEPARATOR</code></td> + <td style="white-space: nowrap;">0x6C (108)</td> + <td></td> + </tr> + <tr> + <td><code>DOM_VK_SUBTRACT</code></td> + <td style="white-space: nowrap;">0x6D (109)</td> + <td>"-" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_DECIMAL</code></td> + <td style="white-space: nowrap;">0x6E (110)</td> + <td>Decimal point on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_DIVIDE</code></td> + <td style="white-space: nowrap;">0x6F (111)</td> + <td>"/" on the numeric keypad.</td> + </tr> + <tr> + <td><code>DOM_VK_F1</code></td> + <td style="white-space: nowrap;">0x70 (112)</td> + <td>F1 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F2</code></td> + <td style="white-space: nowrap;">0x71 (113)</td> + <td>F2 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F3</code></td> + <td style="white-space: nowrap;">0x72 (114)</td> + <td>F3 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F4</code></td> + <td style="white-space: nowrap;">0x73 (115)</td> + <td>F4 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F5</code></td> + <td style="white-space: nowrap;">0x74 (116)</td> + <td>F5 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F6</code></td> + <td style="white-space: nowrap;">0x75 (117)</td> + <td>F6 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F7</code></td> + <td style="white-space: nowrap;">0x76 (118)</td> + <td>F7 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F8</code></td> + <td style="white-space: nowrap;">0x77 (119)</td> + <td>F8 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F9</code></td> + <td style="white-space: nowrap;">0x78 (120)</td> + <td>F9 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F10</code></td> + <td style="white-space: nowrap;">0x79 (121)</td> + <td>F10 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F11</code></td> + <td style="white-space: nowrap;">0x7A (122)</td> + <td>F11 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F12</code></td> + <td style="white-space: nowrap;">0x7B (123)</td> + <td>F12 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F13</code></td> + <td style="white-space: nowrap;">0x7C (124)</td> + <td>F13 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F14</code></td> + <td style="white-space: nowrap;">0x7D (125)</td> + <td>F14 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F15</code></td> + <td style="white-space: nowrap;">0x7E (126)</td> + <td>F15 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F16</code></td> + <td style="white-space: nowrap;">0x7F (127)</td> + <td>F16 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F17</code></td> + <td style="white-space: nowrap;">0x80 (128)</td> + <td>F17 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F18</code></td> + <td style="white-space: nowrap;">0x81 (129)</td> + <td>F18 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F19</code></td> + <td style="white-space: nowrap;">0x82 (130)</td> + <td>F19 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F20</code></td> + <td style="white-space: nowrap;">0x83 (131)</td> + <td>F20 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F21</code></td> + <td style="white-space: nowrap;">0x84 (132)</td> + <td>F21 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F22</code></td> + <td style="white-space: nowrap;">0x85 (133)</td> + <td>F22 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F23</code></td> + <td style="white-space: nowrap;">0x86 (134)</td> + <td>F23 key.</td> + </tr> + <tr> + <td><code>DOM_VK_F24</code></td> + <td style="white-space: nowrap;">0x87 (135)</td> + <td>F24 key.</td> + </tr> + <tr> + <td><code>DOM_VK_NUM_LOCK</code></td> + <td style="white-space: nowrap;">0x90 (144)</td> + <td>Num Lock key.</td> + </tr> + <tr> + <td><code>DOM_VK_SCROLL_LOCK</code></td> + <td style="white-space: nowrap;">0x91 (145)</td> + <td>Scroll Lock key.</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_JISHO</code></td> + <td style="white-space: nowrap;">0x92 (146)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Dictionary" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_MASSHOU</code></td> + <td style="white-space: nowrap;">0x93 (147)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Unregister word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_TOUROKU</code></td> + <td style="white-space: nowrap;">0x94 (148)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Register word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_LOYA</code></td> + <td style="white-space: nowrap;">0x95 (149)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Left OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FJ_ROYA</code></td> + <td style="white-space: nowrap;">0x96 (150)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for "Right OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CIRCUMFLEX</code></td> + <td style="white-space: nowrap;">0xA0 (160)</td> + <td>Circumflex ("^") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_EXCLAMATION</code></td> + <td style="white-space: nowrap;">0xA1 (161)</td> + <td>Exclamation ("!") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_DOUBLE_QUOTE</code></td> + <td style="white-space: nowrap;">0xA3 (162)</td> + <td>Double quote (""") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_HASH</code></td> + <td style="white-space: nowrap;">0xA3 (163)</td> + <td>Hash ("#") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_DOLLAR</code></td> + <td style="white-space: nowrap;">0xA4 (164)</td> + <td>Dollar sign ("$") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PERCENT</code></td> + <td style="white-space: nowrap;">0xA5 (165)</td> + <td>Percent ("%") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_AMPERSAND</code></td> + <td style="white-space: nowrap;">0xA6 (166)</td> + <td>Ampersand ("&") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_UNDERSCORE</code></td> + <td style="white-space: nowrap;">0xA7 (167)</td> + <td>Underscore ("_") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_OPEN_PAREN</code></td> + <td style="white-space: nowrap;">0xA8 (168)</td> + <td>Open parenthesis ("(") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CLOSE_PAREN</code></td> + <td style="white-space: nowrap;">0xA9 (169)</td> + <td>Close parenthesis (")") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_ASTERISK</code></td> + <td style="white-space: nowrap;">0xAA (170)</td> + <td>Asterisk ("*") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PLUS</code></td> + <td style="white-space: nowrap;">0xAB (171)</td> + <td>Plus ("+") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PIPE</code></td> + <td style="white-space: nowrap;">0xAC (172)</td> + <td>Pipe ("|") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_HYPHEN_MINUS</code></td> + <td style="white-space: nowrap;">0xAD (173)</td> + <td>Hyphen-US/docs/Minus ("-") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_OPEN_CURLY_BRACKET</code></td> + <td style="white-space: nowrap;">0xAE (174)</td> + <td>Open curly bracket ("{") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CLOSE_CURLY_BRACKET</code></td> + <td style="white-space: nowrap;">0xAF (175)</td> + <td>Close curly bracket ("}") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_TILDE</code></td> + <td style="white-space: nowrap;">0xB0 (176)</td> + <td>Tilde ("~") key. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_VOLUME_MUTE</code></td> + <td style="white-space: nowrap;">0xB5 (181)</td> + <td>Audio mute key. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_VOLUME_DOWN</code></td> + <td style="white-space: nowrap;">0xB6 (182)</td> + <td>Audio volume down key {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_VOLUME_UP</code></td> + <td style="white-space: nowrap;">0xB7 (183)</td> + <td>Audio volume up key {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_COMMA</code></td> + <td style="white-space: nowrap;">0xBC (188)</td> + <td>Comma (",") key.</td> + </tr> + <tr> + <td><code>DOM_VK_PERIOD</code></td> + <td style="white-space: nowrap;">0xBE (190)</td> + <td>Period (".") key.</td> + </tr> + <tr> + <td><code>DOM_VK_SLASH</code></td> + <td style="white-space: nowrap;">0xBF (191)</td> + <td>Slash ("/") key.</td> + </tr> + <tr> + <td><code>DOM_VK_BACK_QUOTE</code></td> + <td style="white-space: nowrap;">0xC0 (192)</td> + <td>Back tick ("`") key.</td> + </tr> + <tr> + <td><code>DOM_VK_OPEN_BRACKET</code></td> + <td style="white-space: nowrap;">0xDB (219)</td> + <td>Open square bracket ("[") key.</td> + </tr> + <tr> + <td><code>DOM_VK_BACK_SLASH</code></td> + <td style="white-space: nowrap;">0xDC (220)</td> + <td>Back slash ("\") key.</td> + </tr> + <tr> + <td><code>DOM_VK_CLOSE_BRACKET</code></td> + <td style="white-space: nowrap;">0xDD (221)</td> + <td>Close square bracket ("]") key.</td> + </tr> + <tr> + <td><code>DOM_VK_QUOTE</code></td> + <td style="white-space: nowrap;">0xDE (222)</td> + <td>Quote (''') key.</td> + </tr> + <tr> + <td><code>DOM_VK_META</code></td> + <td style="white-space: nowrap;">0xE0 (224)</td> + <td>Meta key on Linux, Command key on Mac.</td> + </tr> + <tr> + <td><code>DOM_VK_ALTGR</code></td> + <td style="white-space: nowrap;">0xE1 (225)</td> + <td>AltGr key (Level 3 Shift key or Level 5 Shift key) on Linux. {{gecko_minversion_inline("15.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_ICO_HELP</code></td> + <td style="white-space: nowrap;">0xE3 (227)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_ICO_00</code></td> + <td style="white-space: nowrap;">0xE4 (228)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_ICO_CLEAR</code></td> + <td style="white-space: nowrap;">0xE6 (230)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_RESET</code></td> + <td style="white-space: nowrap;">0xE9 (233)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_JUMP</code></td> + <td style="white-space: nowrap;">0xEA (234)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_PA1</code></td> + <td style="white-space: nowrap;">0xEB (235)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_PA2</code></td> + <td style="white-space: nowrap;">0xEC (236)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_PA3</code></td> + <td style="white-space: nowrap;">0xED (237)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_WSCTRL</code></td> + <td style="white-space: nowrap;">0xEE (238)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_CUSEL</code></td> + <td style="white-space: nowrap;">0xEF (239)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_ATTN</code></td> + <td style="white-space: nowrap;">0xF0 (240)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_FINISH</code></td> + <td style="white-space: nowrap;">0xF1 (241)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_COPY</code></td> + <td style="white-space: nowrap;">0xF2 (242)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_AUTO</code></td> + <td style="white-space: nowrap;">0xF3 (243)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_ENLW</code></td> + <td style="white-space: nowrap;">0xF4 (244)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_BACKTAB</code></td> + <td style="white-space: nowrap;">0xF5 (245)</td> + <td>An <a href="#OEM_specific_keys_on_Windows" title="#OEM_specific_keys_on_Windows">OEM specific key on Windows</a>. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_ATTN</code></td> + <td style="white-space: nowrap;">0xF6 (246)</td> + <td>Attn (Attention) key of IBM midrange computers, e.g., AS/400. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_CRSEL</code></td> + <td style="white-space: nowrap;">0xF7 (247)</td> + <td>CrSel (Cursor Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_EXSEL</code></td> + <td style="white-space: nowrap;">0xF8 (248)</td> + <td>ExSel (Extend Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_EREOF</code></td> + <td style="white-space: nowrap;">0xF9 (249)</td> + <td>Erase EOF key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PLAY</code></td> + <td style="white-space: nowrap;">0xFA (250)</td> + <td>Play key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_ZOOM</code></td> + <td style="white-space: nowrap;">0xFB (251)</td> + <td>Zoom key. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_PA1</code></td> + <td style="white-space: nowrap;">0xFD (253)</td> + <td>PA1 key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}</td> + </tr> + <tr> + <td><code>DOM_VK_WIN_OEM_CLEAR</code></td> + <td style="white-space: nowrap;">0xFE (254)</td> + <td>Clear key, but we're not sure the meaning difference from <code>DOM_VK_CLEAR</code>. {{gecko_minversion_inline("21.0")}}</td> + </tr> + </tbody> +</table> + +<h3 id="OEM_specific_keys_on_Windows">OEM specific keys on Windows</h3> + +<p>On Windows, some values of virtual keycode are defined (reserved) for OEM specific key. They are available for special keys on non-standard keyboard. In other words, some values are used for different meaning by two or more vendors (or hardware).</p> + +<p>Starting Gecko 21 (and older than 15), OEM specific key values are available on the keyCode attribute only on Windows. So they are not useful for usual web applications. They are useful only for intranet applications or in similar situations.</p> + +<p>See "<a href="http://msdn.microsoft.com/en-us/library/aa452679.aspx" title="http://msdn.microsoft.com/en-us/library/aa452679.aspx">Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)</a>" in MSDN for the detail.</p> + +<div id="cke_pastebin"></div> |