ResizeObserverEntry: contentBoxSize プロパティ - Web API

ResizeObserverEntry: contentBoxSize プロパティ
=========================================

**`contentBoxSize`** は `ResizeObserverEntry` インターフェイスの読み取り専用プロパティで、コールバック実行時に、監視された要素の新しいコンテンツボックスサイズを含む配列を返します。

値
-

監視された要素の新しいコンテンツボックスサイズを持つオブジェクトを含む配列です。配列である必要があるのは、複数の段が存在するときに複数の断片のある要素に対応するためです。配列の各オブジェクトは、 2 つのプロパティを含みます。

`blockSize`

監視された要素のコンテンツボックスのブロック方向の長さ。書字方向 (`writing-mode`) が水平のボックスの場合、これは垂直方向の寸法、すなわち高さであり、 writing-mode が垂直である場合は、これは水平方向の寸法、すなわち幅です。

`inlineSize`

監視された要素のコンテンツボックスのインライン方向の長さ。書字方向 (`writing-mode`) が水平のボックスの場合、これは水平方向の寸法、すなわち幅であり、 writing-mode が垂直である場合は、これは垂直方向の寸法、すなわち高さです。

**メモ:** 書字方向やブロック・インラインの寸法についての詳しい説明は、テキスト方向の操作をご覧ください。

例
-

 以下のスニペットは、 resize-observer-border-radius.html
 （ソースを参照）の例から取ったものです。
 この例では、ビューポートの大きさに対するパーセント値でサイズ設定された緑色のボックスが含まれています。ビューポートの大きさが変更されると、ボックスの丸みを帯びた角がボックスのサイズに比例して変更されます。パーセント値で `border-radius` を使用してこれを実装することもできますが、これではすぐに見苦しい楕円形の角になってしまいます。このソリューションでは、ボックスのサイズに比例した美しい四角形の角が得られます。

```js
const resizeObserver = new ResizeObserver((entries) => {
  for (let entry of entries) {
    if (entry.contentBoxSize) {
      // 標準では contentBoxSize は配列...
      if (entry.contentBoxSize[0]) {
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize[0].inlineSize / 10 +
              entry.contentBoxSize[0].blockSize / 10,
          ) + "px";
      } else {
        // ...しかし、古いバージョンの Firefox は単一のアイテムとして扱う
        entry.target.style.borderRadius =
          Math.min(
            100,
            entry.contentBoxSize.inlineSize / 10 +
              entry.contentBoxSize.blockSize / 10,
          ) + "px";
      }
    } else {
      entry.target.style.borderRadius =
        Math.min(
          100,
          entry.contentRect.width / 10 + entry.contentRect.height / 10,
        ) + "px";
    }
  }
});

resizeObserver.observe(document.querySelector("div"));
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-contentboxsize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ResizeObserverEntry: contentRect プロパティ - Web API

ResizeObserverEntry: contentRect プロパティ
======================================

`contentRect` は `ResizeObserverEntry` インターフェイスの読み取り専用プロパティで、コールバックが実行されたときに `DOMRectReadOnly` オブジェクトの形で監視中の要素の新しい寸法を返します。なお、これは `ResizeObserverEntry.borderBoxSize` や `ResizeObserverEntry.contentBoxSize` よりも広く対応されていますが、 Resize Observer API では早期に除外され、現在は互換性の目的で仕様書に存在しているため、将来のバージョンでは非推奨になる可能性があります。

### 値

`DOMRectReadOnly` オブジェクトで、 `target` プロパティで示された要素の新しい寸法が入ります。

`target` が HTML の `Element` である場合、返される `contentRect` は要素のコンテンツボックスです。 `target` が `SVGElement` である場合、返される `contentRect` は SVG のバウンディングボックスです。

例
-

以下のスニペットは resize-observer-text.html (ソースを参照) の例から取ったものです。これは簡単な機能検出テストを使用して、ブラウザーがより新しい `ResizeObserverEntry.contentBoxSize` プロパティに対応しているかどうかを確認します。 — もし対応していれば、こちらを使用して必要な寸法のデータを取得します。そうでない場合は、 `contentRect` を使用します。

```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentBoxSize.inlineSize / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(
 1,
 entry.contentBoxSize.inlineSize / 600,
 )}rem`;
    } else {
      h1Elem.style.fontSize = `${Math.max(
 1.5,
 entry.contentRect.width / 200,
 )}rem`;
      pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
    }
  }
});

resizeObserver.observe(divElem);
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-contentrect |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ResizeObserverEntry: borderBoxSize プロパティ - Web API

ResizeObserverEntry: borderBoxSize プロパティ
========================================

**`borderBoxSize`** は `ResizeObserverEntry` インターフェイスの読み取り専用プロパティで、コールバック実行時に、監視された要素の新しい境界ボックスサイズを含む配列を返します。

値
-

監視された要素の新しい境界ボックスサイズを持つオブジェクトを含む配列です。配列である必要があるのは、複数の段が存在するときに複数の断片のある要素に対応するためです。配列の各オブジェクトは、 2 つのプロパティを含みます。

`blockSize`

監視された要素の境界ボックスのブロック方向の長さ。書字方向 (`writing-mode`) が水平のボックスの場合、これは垂直方向の寸法、すなわち高さであり、 writing-mode が垂直である場合は、これは水平方向の寸法、すなわち幅です。

`inlineSize`

監視された要素の境界ボックスのインライン方向の長さ。書字方向 (`writing-mode`) が水平のボックスの場合、これは水平方向の寸法、すなわち幅であり、 writing-mode が垂直である場合は、これは垂直方向の寸法、すなわち高さです。

**メモ:** 書字方向やブロック・インラインの寸法についての詳しい説明は、テキスト方向の操作をご覧ください。

例
-

```js
const resizeObserver = new ResizeObserver((entries) => {
  const calcBorderRadius = (size1, size2) =>
    `${Math.min(100, size1 / 10 + size2 / 10)}px`;

  for (const entry of entries) {
    if (entry.borderBoxSize?.length > 0) {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.borderBoxSize[0].inlineSize,
        entry.borderBoxSize[0].blockSize,
      );
    } else {
      entry.target.style.borderRadius = calcBorderRadius(
        entry.contentRect.width,
        entry.contentRect.height,
      );
    }
  }
});

resizeObserver.observe(document.querySelector("div"));
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-borderboxsize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ResizeObserverEntry: devicePixelContentBoxSize プロパティ - Web API

ResizeObserverEntry: devicePixelContentBoxSize プロパティ
====================================================

**`devicePixelContentBoxSize`** は `ResizeObserverEntry` インターフェイスの読み取り専用プロパティで、コールバック実行時に、監視されている要素のデバイスピクセル単位のサイズを含む配列を返します。

値
-

監視されている要素の新しいサイズをデバイスピクセル単位で持つオブジェクトを含む配列です。配列である必要があるのは、複数の段が存在するときに複数の断片のある要素に対応するためです。配列の各オブジェクトは、 2 つのプロパティを含みます。

`blockSize`

 監視されている要素のコンテンツボックスのブロック方向の長さをデバイスピクセル単位で示します。
 書字方向 (`writing-mode`) が水平のボックスの場合、これは垂直方向の寸法、すなわち高さであり、 writing-mode が垂直である場合は、これは水平方向の寸法、すなわち幅です。

`inlineSize`

 監視されている要素のコンテンツボックスのインライン方向の長さをデバイスピクセル単位で示します。
 書字方向 (`writing-mode`) が水平のボックスの場合、これは水平方向の寸法、すなわち幅であり、 writing-mode が垂直である場合は、これは垂直方向の寸法、すなわち高さです。

**メモ:** 書字方向やブロック・インラインの寸法についての詳しい情報は、テキスト方向の操作をご覧ください。

例
-

 以下の例は、 Pixel-perfect rendering with devicePixelContentBox の記事から取ったものです。
 `ResizeObserver` のコールバック関数は、レイアウトの後、描画の前に呼び出されるためです。
 このため、正確なサイズを物理ピクセルで記録し、 canvas のピクセルと物理ピクセルの 1 対 1 対応を確保する機会が提供されます。

```js
const observer = new ResizeObserver((entries) => {
  const entry = entries.find((entry) => entry.target === canvas);
  canvas.width = entry.devicePixelContentBoxSize[0].inlineSize;
  canvas.height = entry.devicePixelContentBoxSize[0].blockSize;

  /\* … render to canvas … \*/
});
observer.observe(canvas, { box: "device-pixel-content-box" });
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-devicepixelcontentboxsize |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


ResizeObserverEntry: target プロパティ - Web API

ResizeObserverEntry: target プロパティ
=================================

**`target`** は `ResizeObserverEntry` インターフェイスの読み取り専用プロパティで、監視対象の `Element` または `SVGElement` への参照を返します。

値
-

監視対象の要素を表す `Element` または `SVGElement` です。

例
-

 次のスニペットは resize-observer-border-radius.html
 （ソースを表示）の例から取りました。
 この例では、ビューポートサイズに対するパーセント値でサイズ設定された緑色のボックスが含まれています。ビューポートサイズが変更されると、ボックスの丸みを帯びた角がボックスのサイズに比例して変更されます。
 パーセント値で `border-radius` を使用してこれを実装することもできますが、これではすぐに見苦しい楕円形の角になってしまいます。このソリューションでは、ボックスのサイズに比例した美しい四角形の角が得られます。

このように、変更するたびに `border-radius` の値を更新できるように、観測された要素への参照を取得するために、各エントリーの `target` プロパティ - `entry.target.style.borderRadius` を使用します。

```js
const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    if (entry.contentBoxSize) {
      entry.target.style.borderRadius = `${Math.min(
 100,
 entry.contentBoxSize.inlineSize / 10 +
 entry.contentBoxSize.blockSize / 10,
 )}px`;
    } else {
      entry.target.style.borderRadius = `${Math.min(
 100,
 entry.contentRect.width / 10 + entry.contentRect.height / 10,
 )}px`;
    }
  }
});

resizeObserver.observe(document.querySelector("div"));
```

仕様書
---

| Specification |
| --- |
| Resize Observer # dom-resizeobserverentry-target |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: checkValidity() メソッド - Web API

HTMLObjectElement: checkValidity() メソッド
=======================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`checkValidity()`** は `HTMLObjectElement` インターフェイスのメソッドで、常に真である論理値を返します。なぜなら、object のオブジェクトは制約検証の候補になることがないからです。

構文
--

```js
checkValidity()
```

### 引数

なし。

### 返値

`true`

### 例外

なし。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-checkvalidity-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: useMap プロパティ - Web API

HTMLObjectElement: useMap プロパティ
===============================

**`useMap`** は `HTMLObjectElement` インターフェイスのプロパティで、 HTML の `usemap` 属性を反映する文字列を返します。使用する`<map>` 要素を指定します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-object-usemap |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: setCustomValidity() メソッド - Web API

HTMLObjectElement: setCustomValidity() メソッド
===========================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`setCustomValidity()`** は `HTMLObjectElement` インターフェイスのメソッドで、この要素に独自の検証メッセージを設定します。

構文
--

```js
setCustomValidity(errorMessage)
```

### 引数

`errorMessage`

検証エラーに使用するメッセージです。

### 返値

なし (`undefined`)。

### 例外

なし。

例
-

この例では、 input 要素の ID を渡し、値が不足しているか、低すぎるか、高すぎるかによって、異なるエラーメッセージを設定します。さらに、同じ要素で reportValidity メソッドを呼び出す必要があり、さもなければ何も起こりません。

```js
function validate(inputID) {
  const input = document.getElementById(inputID);
  const validityState = input.validity;

  if (validityState.valueMissing) {
    input.setCustomValidity("ここに記入するんだ！");
  } else if (validityState.rangeUnderflow) {
    input.setCustomValidity("もっと高い数字が必要だ!");
  } else if (validityState.rangeOverflow) {
    input.setCustomValidity("高すぎる!");
  } else {
    input.setCustomValidity("");
  }

  input.reportValidity();
}
```

エラーがない場合は、メッセージを空文字列に設定することが重要です。エラーメッセージが空でない限り、フォームは検証を通らず、送信されません。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-setcustomvalidity-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `validityState`
* `validityState.valueMissing`
* `validityState.typeMismatch`
* `validityState.patternMismatch`
* `validityState.tooLong`
* `validityState.tooShort`
* `validityState.rangeUnderflow`
* `validityState.rangeOverflow`
* `validityState.stepMismatch`
* `validityState.valid`
* `validityState.customError`


HTMLObjectElement: height プロパティ - Web API

HTMLObjectElement: height プロパティ
===============================

**`height`** は `HTMLObjectElement` インターフェイスのプロパティで、 HTML の `height` 属性を反映した文字列を返します。リソースを表示する高さを CSS ピクセル単位で指定します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dim-height |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: type プロパティ - Web API

HTMLObjectElement: type プロパティ
=============================

**`type`** は `HTMLObjectElement` インターフェイスのプロパティで、
 インターフェースは、 HTML の `type` 属性を反映した文字列を返します。リソースの MIME タイプを指定します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-object-type |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: form プロパティ - Web API

HTMLObjectElement: form プロパティ
=============================

**`form`** は `HTMLObjectElement` インターフェイスの読み取り専用プロパティで、この object 要素のフォームのオーナーを表す `HTMLFormElement` を返します。オーナーがない場合は null を返します。

値
-

`HTMLFormElement` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-fae-form-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: name プロパティ - Web API

HTMLObjectElement: name プロパティ
=============================

**`name`** は `HTMLObjectElement` インターフェイスのプロパティで、 HTML の `name` 属性を反映した文字列を返します。閲覧コンテキストの名前を指定します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-object-name |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: data プロパティ - Web API

HTMLObjectElement: data プロパティ
=============================

**`data`** は `HTMLObjectElement` インターフェイスのプロパティで、HTML の `data` 属性を反映した文字列を返します。リソースのデータのアドレスを指定します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-object-data |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: willValidate プロパティ - Web API

HTMLObjectElement: willValidate プロパティ
=====================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`willValidate`** は `HTMLObjectElement` インターフェイスの読み取り専用プロパティで、その要素が制約検証の候補であるかどうかを示す論理値を返します。`HTMLObjectElement` オブジェクトの場合は常に `false` です。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-willvalidate-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: validity プロパティ - Web API

HTMLObjectElement: validity プロパティ
=================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`validity`** は `HTMLObjectElement` インターフェイスのメソッドで、この要素が属する検証状態を `ValidityState` で返します。

値
-

`ValidityState` オブジェクト。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-validity |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: contentWindow プロパティ - Web API

HTMLObjectElement: contentWindow プロパティ
======================================

**`contentWindow`** は `HTMLObjectElement` インターフェイスの読み取り専用プロパティで、オブジェクト要素の含まれている閲覧コンテキストにウィンドウプロキシーがあれば、それを表す WindowProxy を返し、なければ null を返します。

値
-

`Window` です。存在しなければ `null` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-object-contentwindow |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: width プロパティ - Web API

HTMLObjectElement: width プロパティ
==============================

**`width`** は `HTMLObjectElement` インターフェイスのプロパティで、 HTML の `width` 属性を反映した文字列であり、リソースが表示される幅を CSS ピクセル単位で指定する値を返します。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-dim-width |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: validationMessage プロパティ - Web API

HTMLObjectElement: validationMessage プロパティ
==========================================

Baseline 2023
-------------

Newly availableSince March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`validationMessage`** は `HTMLObjectElement` インターフェイスの読み取り専用プロパティで、コントロールが満たしていない制約検証を説明する、ローカライズされたメッセージを（もしあれば）文字列で返します。コントロールが制約検証の候補でない場合（`willValidate` が `false` である場合）、あるいは制約を満たしている場合には、これは空文字列となります。

値
-

文字列です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-cva-validationmessage-dev |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


HTMLObjectElement: contentDocument プロパティ - Web API

HTMLObjectElement: contentDocument プロパティ
========================================

**`contentDocument`** は `HTMLObjectElement` インターフェイスの読み取り専用プロパティで、この object 要素のネストした閲覧コンテキストのアクティブな文書があれば、それを表す `Document` を返し、なければ null を返します。

値
-

`Document` です。

仕様書
---

| Specification |
| --- |
| HTML Standard # dom-object-contentdocument |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


KeyboardEvent: KeyboardEvent() コンストラクター - Web API

KeyboardEvent: KeyboardEvent() コンストラクター
=======================================

**`KeyboardEvent()`** コンストラクターは、新しい `KeyboardEvent` オブジェクトを生成します。

構文
--

```js
new KeyboardEvent(type)
new KeyboardEvent(type, options)
```

### 引数

`type`

 イベントの名前を文字列で示します。
 大文字と小文字の区別があり、ブラウザーは `keydown`, `keyup`, `keypress` の何れかに設定します。

`options` 省略可

オブジェクトで、*`UIEvent()` で定義されているものに加え*、以下のプロパティを持つことができます。

`key` 省略可

文字列で、既定値は `""` であり、 `KeyboardEvent.key` の値を設定します。

`code` 省略可

文字列で、既定値は `""` であり、 `KeyboardEvent.code` の値を設定します。

`location` 省略可

文字列で、既定値は `0` であり、 `KeyboardEvent.location` の値を設定します。

`repeat` 省略可

論理値で、既定値は `false` であり、 `KeyboardEvent.repeat` の値を設定します。

`isComposing` 省略可

論理値で、既定値は `false` であり、 `KeyboardEvent.isComposing` の値を設定します。

`charCode` 省略可
非推奨

数値で、既定値は `0` であり、非推奨の `KeyboardEvent.charCode` の値を設定します。

`keyCode` 省略可
非推奨

数値で、既定値は `0` であり、非推奨の `KeyboardEvent.keyCode` の値を設定します。

`which` 省略可
非推奨

数値で、既定値は `0` であり、非推奨の `UIEvent.which` の値を設定します。

`ctrlKey` 省略可

論理値で、既定値は `false` であり、 `KeyboardEvent.ctrlKey` の値を設定します。

`shiftKey` 省略可

論理値で、既定値は `false` であり、 `KeyboardEvent.shiftKey` の値を設定します。

`altKey` 省略可

論理値で、既定値は `false` であり、 `KeyboardEvent.altKey` の値を設定します。

`metaKey` 省略可

論理値で、既定値は `false` であり、 `KeyboardEvent.metaKey` の値を設定します。

### 返値

新しい `KeyboardEvent` オブジェクトです。

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-keyboardevent |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* 構築するオブジェクトのインターフェイスである `KeyboardEvent`


KeyboardEvent: code プロパティ - Web API

KeyboardEvent: code プロパティ
=========================

`KeyboardEvent.code` プロパティは、（キー入力によって入力された文字ではなく）キーボード上の物理的なキーを表します。つまり、このプロパティはキーボードレイアウトや修飾キーの状態によって変更される前の値を返します。

入力機器が物理キーボードではなく、仮想キーボードやアクセシビリティ機器である場合、返値は物理キーボードから入力された場合にできるだけ近づくよう、物理キーボードと仮想入力機器との互換性を最大にするよう、ブラウザーによって設定されます。

このプロパティは、キーに関連付けられている文字ではなく、入力機器上の物理的な位置に基づいてキー入力を扱いたいときに役立ちます。これは特に、キーボードをゲームパッドのように使いたい場合などに有用です。ただし、 `KeyboardEvent.code` で報告された値を用いてキー入力で生成される文字を判断するべきではありません。キーコード名がキー上に印刷されている実際の文字や、キーが押されたときにコンピューターが生成する文字と一致するとは限らないからです。

例えば、返ってきた `code` が "`KeyQ`" は QWERTY レイアウトのキーボードでは `Q` キーですが、同じ Dvorak キーボードでは同じ `code` の値が `'` キーを表し、 AZERTY キーボードでは `A` キーを表すものでもあります。したがって、すべてのユーザーが特定のキーボードレイアウトを使用しているわけではないため、 `code` の値を用いてユーザーが認識しているキーの名前が何であるかを特定することはできません。

キーイベントに対応する文字が何であるかを判別するには、代わりに `KeyboardEvent.key` プロパティを使用してください。

値
-

Windows, Linux, macOS におけるコード値は、 KeyboardEvent: コード値のページにあります。

例
-

### KeyboardEvent の使用例

#### HTML

```html
<p>
  キーボードのキーを押して、 KeyboardEvent のキーとコードの値がそれぞれどうなっているかを確認しましょう。
</p>
<div id="output" tabindex="0"></div>
```

#### CSS

```css
#output {
  font-family: Arial, Helvetica, sans-serif;
  border: 1px solid black;
  width: 95%;
  margin: auto;
}
#output:focus-visible {
  outline: 3px solid dodgerblue;
}
```

#### JavaScript

```js
window.addEventListener(
  "keydown",
  (event) => {
    const p = document.createElement("p");
    p.textContent = `KeyboardEvent: key='${event.key}' | code='${event.code}'`;
    document.getElementById("output").appendChild(p);
    window.scrollTo(0, document.body.scrollHeight);
  },
  true,
);
```

#### 試してみましょう

キー入力をサンプルコードに取得させるために、キーを入力する前に output ボックスをクリックしてください。

### ゲームでのキーボードイベントの扱い

この例では、典型的な "WASD" キーボードレイアウトを使用して前進、左折、後退、右折するゲームのキーボード入力を処理する `keydown` イベントに対するイベントリスナーを確立しています。これは、ユーザーが AZERTY キーボードを使用している場合など、実際に対応する文字が何であるかに関係なく、物理的に同じ 4 つのキーを使用します。

#### HTML

```html
<p>
  WASD キー（AZERTY キーボードでは
  ZQSD）を使って移動したり方向を変えたりしましょう。
</p>
<svg
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 class="world"
 tabindex="0">
  <polygon id="spaceship" points="15,0 0,30 30,30" />
</svg>
```

#### CSS

```css
.world {
  margin: 0px;
  padding: 0px;
  background-color: black;
  width: 400px;
  height: 400px;
}
.world:focus-visible {
  outline: 5px solid dodgerblue;
}
#spaceship {
  fill: orange;
  stroke: red;
  stroke-width: 2px;
}
```

#### JavaScript

この JavaScript のコードの最初の部分では、これから使用するいくつかの変数を定義しています。 `shipSize` にはプレイヤーが移動する船の大きさが入ります。 `position` はプレイフィールド内での船の位置を追跡するために使用します。 `moveRate` はキーを押すごとに船を前後に何ピクセル動かすかを表し、 `turnRate` はキーを押すごとに左右の操舵コントロールで何度回転させるかを表します。 `angle` は現在船に適用されている回転の量を度数で表し、 0 度（真上向き）から始まります。最後に、 `spaceship` は ID `"spaceship"` の要素を指すように設定されています。これは、プレイヤーが操作する船を表す SVG ポリゴンを指します。

```js
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");
```

次に、関数 `updatePosition()` があります。この関数は、船を移動させる距離を入力として受け取ります。正の値は前進、負の値は後退を意味します。この関数は、移動した距離と船が現在向いている方向から、船の新しい位置を計算します。また、プレイフィールドの境界を越えた際に船が消えず、境界をまたぐようにする処理も行います。

```js
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;
  }
}
```

`refresh()` 関数は SVG の transform を使用して、向きと位置を適用する処理を行います。

```js
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);
}
refresh();
```

最後に、`addEventListener()` メソッドを使用して `keydown` イベントの待ち受けを開始します。それぞれのイベントで船の位置と回転角を更新し、 `refresh()` を呼び出して新しい位置と角度で船を描画するように動作します。

```js
window.addEventListener(
  "keydown",
  (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();

    if (event.code !== "Tab") {
      // Consume the event so it doesn't get handled twice,
      // as long as the user isn't trying to move focus away
      event.preventDefault();
    }
  },
  true,
);
```

#### 試してみましょう

キー入力が確実にサンプルコードに反映されるように、キーを押す前に下の黒いゲームプレイフィールドをクリックまたはフォーカスしてください。

このコードを改善する方法はいくつかあります。実際のゲームでは、キーリピートに頼るのではなく、`keydown` イベントを監視して、それが発生したら動作を開始し、対応する `keyup` が発生したら動作を停止することがほとんどだと思います。そうすることで、よりスムーズで高速な移動が可能になり、プレイヤーは移動と操舵を同時に行えるようになります。トランジションやアニメーションを使用して、自機の動きをより滑らかにすることもできます。

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-code |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


KeyboardEvent: shiftKey プロパティ - Web API

KeyboardEvent: shiftKey プロパティ
=============================

**`KeyboardEvent.shiftKey`** は読み取り専用プロパティで、このイベントが発生したときに `shift` キーが押されていたか (`true`) いなかったか (`false`) を示す論理値を返します。

値
-

論理値です。

例
-

```html
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>シフトキーの例</title>

    <script>
 function showChar(e) {
 alert(
 "押されたキー: " +
 String.fromCharCode(e.charCode) +
 "\n" +
 "charCode: " +
 e.charCode +
 "\n" +
 "SHIFT key pressed: " +
 e.shiftKey +
 "\n" +
 "ALT key pressed: " +
 e.altKey +
 "\n",
 );
 }
 </script>
  </head>

  <body onkeypress="showChar(event);">
    <p>
      SHIFT
      キーを押しながら、または押さずに、任意の文字キーを押してください。<br />
      SHIFT キーと ALT キーを併用することもできます。
    </p>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-shiftkey |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `KeyboardEvent`


KeyboardEvent: isComposing プロパティ - Web API

KeyboardEvent: isComposing プロパティ
================================

**`KeyboardEvent.isComposing`** は読み取り専用プロパティで、イベントが変換セッションの途中、すなわち `compositionstart` の後かつ `compositionend` の前に発行されたことを示す論理値を返します。

値
-

論理値です。

例
-

```js
const kbdEvent = new KeyboardEvent("syntheticKey", false);
console.log(kbdEvent.isComposing); // false を返す
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-iscomposing |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `compositionstart` および `compositionend`
* `KeyboardEvent`


KeyboardEvent: keyCode プロパティ - Web API

KeyboardEvent: keyCode プロパティ
============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非推奨の **`KeyboardEvent.keyCode`** 読み取り専用プロパティは、押されたキーの変更されていない値を識別するシステムおよび実装に依存する数値コードを表します。

これは通常、キーに対応する 10 進数の ASCII (RFC 20) または Windows 1252 コードです。キーを識別できない場合は、この値は `0` になります。

これはしばらく非推奨となっていますので、できれば使用しないようにしてください。代わりに、もし実装されていれば `KeyboardEvent.code` を使用してください。残念ながら、まだ実装されていないブラウザーもありますので、対象となるすべてのブラウザーで対応するものを使用するように注意する必要があります。

**メモ:** ウェブ開発者は `keydown` と `keyup` イベントを処理する際に、表示可能な文字に対して `keyCode` 属性を使用するべきではありません。前述のように、`keyCode` 属性は表示可能な文字、特に `Shift` や `Alt` キーが押された状態での文字に対しては有用ではありません。ショートカットキーハンドラーを実装する場合、通常は `keypress` イベントの方がよいでしょう（少なくとも Gecko を使用するランタイムではそうでしょう）。

例
-

```js
window.addEventListener(
  "keydown",
  (event) => {
    if (event.defaultPrevented) {
      return; // 既定のアクションがキャンセルされている場合は何もしないようにします。
    }

    let handled = false;
    if (event.key !== undefined) {
      // KeyboardEvent.key でイベントを処理し、handled を true に設定します。
      handled = true;
    } else if (event.keyCode !== undefined) {
      // KeyboardEvent.keyCode でイベントを処理し、handled を true に設定します。
      handled = true;
    }

    if (handled) {
      // イベントが処理された場合、"ダブルアクション" を抑制する
      event.preventDefault();
    }
  },
  true,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-keycode |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

keyCode の値
----------

### 標準位置で表示可能なキー

標準位置で表示可能なキーを押したり離したりすることで発生するキーイベントの値は、ブラウザー間で互換性がありません。

IE はネイティブの仮想キーコードの値を `KeyboardEvent.keyCode` として公開するだけです。

Google Chrome、Chromium、Safari は入力された文字から値を決定する必要があります。入力文字が US キーボードレイアウトで入力できる場合、 US キーボードレイアウトの `keyCode` 値を使用します。

Firefox は、キーによって入力可能な ASCII 文字から `keyCode` 値を取得します。 shift 修飾子や ASCII 対応キーボードレイアウトであった場合も含みます。詳しくは以下のルールを参照してください。

1. システムが Windows で、押されたキーのネイティブキーコードが a-z または 0-9 であることを示す場合、そのキーコードを使用します。
2. システムが Mac で、押されたキーのネイティブキーコードが 0-9 である場合、そのキーコードを使用します。
3. 押されたキーが ASCII のアルファベットまたは数字を修飾キーなしで入力する場合、それに対応するキーコードを使用します。
4. 押されたキーが、 ASCII アルファベットまたは数字を Shift キーで修飾して入力する場合、そのキーコードを使用します。
5. 押されたキーが、別の ASCII 文字を修飾キーなしで入力する場合、それに対応するキーコードを使用します。
6. 押されたキーが、別の ASCII文字を Shift キー修飾で入力する場合、それに対応するキーコードを使用します。
7. それ以外の場合、すなわち、押されたキーが Unicode 文字を入力する場合は以下の通り。
    1. キーボードレイアウトが ASCII 対応の（ASCII アルファベットを入力できる）場合、 0 を使用するか、下記の追加ルールで計算します。
    2. それ以外の場合、つまりキーボードレイアウトが ASCII に対応していない場合は、最も優先度の高い環境にインストールされている ASCII に対応したキーボードレイアウトを使用します。
        1. 代替キーボードレイアウトで押されたキーが ASCII のアルファベットまたは数字を入力する場合、そのキーコードを使用します。
        2. それ以外の場合、 0 を使用するか、下記の追加ルールで計算します。

Gecko は区切り記号キーの `keyCode` 値を、できる限り以下の規則で設定します（上記のリストのポイント 7.1 または 7.2 に到達したとき）。

**警告:** これらの新しい追加ルールの目的は、米国式キーボードレイアウトの区切り記号キーに unicode 文字をマッピングしているユーザーが、 Firefox に対応したウェブアプリケーションを ASCII に対応したキーボードレイアウトのみ、または米国式キーボードレイアウトのみで使用できるようにするためです。そうでなければ、新しく割り当てられた `keyCode` 値が他のキーと衝突する可能性があります。例えば、アクティブなキーボードレイアウトがロシア語の場合、 `"Period"` キーと `"Slash"` キーの `keyCode` 値は**どちらも** `190` (`KeyEvent.DOM_VK_PERIOD`) になります。もし、これらのキーを区別する必要があるが、世界中の全てのキーボードレイアウトに自分で対応したくない場合は、おそらく `KeyboardEvent.code` を使用した方が良いでしょう。

1. macOS または Linux を使用している場合
    1. アクティブなキーボードレイアウトが ASCII に対応したものではなく、代替の ASCII 対応のキーボードレイアウトが利用可能な場合。
        1. もし、 ASCII に対応したキーボードレイアウトが、修飾されていないキーだけで ASCII 文字を生成する場合、その文字の `keyCode` を使用します。
        2. もし、代替の ASCII に対応したキーボードレイアウトで、 Shift キーで修飾した ASCII 文字が生成された場合、シフトされた文字の `keyCode`を使用します。
        3. それ以外の場合は、 US キーボードレイアウトがアクティブなときにキーが生成する ASCII 文字を `keyCode` に使用します。
    2. それ以外の場合は、 US キーボードレイアウトがアクティブなときにキーが生成する ASCII 文字を `keyCode` に使用します。
2. Windows を使用している場合
    1. US キーボードレイアウトがアクティブなときに Windows の同じ仮想キーコードに割り当てられたキーによって生成される ASCII 文字を `keyCode` 値に使用します。

標準的な位置にある表示可能なキーによって発生する keydown イベントのブラウザーごとの keyCode 値| `KeyboardEvent.code` | IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |
| --- | --- | --- | --- | --- | --- |
|  | Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
|  | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 |
| `"Digit1"` | `0x31 (49)` | `0x31 (49)` | `0x31 (49)` | `0x31 (49)` | `0x31 (49)` | `0x31 (49)` | `0x31 (49)` | `0x31 (49)` |
| `"Digit2"` | `0x32 (50)` | `0x32 (50)` | `0x32 (50)` | `0x32 (50)` | `0x32 (50)` | `0x32 (50)` | `0x32 (50)` | `0x32 (50)` |
| `"Digit3"` | `0x33 (51)` | `0x33 (51)` | `0x33 (51)` | `0x33 (51)` | `0x33 (51)` | `0x33 (51)` | `0x33 (51)` | `0x33 (51)` |
| `"Digit4"` | `0x34 (52)` | `0x34 (52)` | `0x34 (52)` | `0x34 (52)` | `0x34 (52)` | `0x34 (52)` | `0x34 (52)` | `0x34 (52)` |
| `"Digit5"` | `0x35 (53)` | `0x35 (53)` | `0x35 (53)` | `0x35 (53)` | `0x35 (53)` | `0x35 (53)` | `0x35 (53)` | `0x35 (53)` |
| `"Digit6"` | `0x36 (54)` | `0x36 (54)` | `0x36 (54)` | `0x36 (54)` | `0x36 (54)` | `0x36 (54)` | `0x36 (54)` | `0x36 (54)` |
| `"Digit7"` | `0x37 (55)` | `0x37 (55)` | `0x37 (55)` | `0x37 (55)` | `0x37 (55)` | `0x37 (55)` | `0x37 (55)` | `0x37 (55)` |
| `"Digit8"` | `0x38 (56)` | `0x38 (56)` | `0x38 (56)` | `0x38 (56)` | `0x38 (56)` | `0x38 (56)` | `0x38 (56)` | `0x38 (56)` |
| `"Digit9"` | `0x39 (57)` | `0x39 (57)` | `0x39 (57)` | `0x39 (57)` | `0x39 (57)` | `0x39 (57)` | `0x39 (57)` | `0x39 (57)` |
| `"Digit0"` | `0x30 (48)` | `0x30 (48)` | `0x30 (48)` | `0x30 (48)` | `0x30 (48)` | `0x30 (48)` | `0x30 (48)` | `0x30 (48)` |
| `"KeyA"` | `0x41 (65)` | `0x41 (65)` | `0x41 (65)` | `0x41 (65)` | `0x41 (65)` | `0x41 (65)` | `0x41 (65)` | `0x41 (65)` |
| `"KeyB"` | `0x42 (66)` | `0x42 (66)` | `0x42 (66)` | `0x42 (66)` | `0x42 (66)` | `0x42 (66)` | `0x42 (66)` | `0x42 (66)` |
| `"KeyC"` | `0x43 (67)` | `0x43 (67)` | `0x43 (67)` | `0x43 (67)` | `0x43 (67)` | `0x43 (67)` | `0x43 (67)` | `0x43 (67)` |
| `"KeyD"` | `0x44 (68)` | `0x44 (68)` | `0x44 (68)` | `0x44 (68)` | `0x44 (68)` | `0x44 (68)` | `0x44 (68)` | `0x44 (68)` |
| `"KeyE"` | `0x45 (69)` | `0x45 (69)` | `0x45 (69)` | `0x45 (69)` | `0x45 (69)` | `0x45 (69)` | `0x45 (69)` | `0x45 (69)` |
| `"KeyF"` | `0x46 (70)` | `0x46 (70)` | `0x46 (70)` | `0x46 (70)` | `0x46 (70)` | `0x46 (70)` | `0x46 (70)` | `0x46 (70)` |
| `"KeyG"` | `0x47 (71)` | `0x47 (71)` | `0x47 (71)` | `0x47 (71)` | `0x47 (71)` | `0x47 (71)` | `0x47 (71)` | `0x47 (71)` |
| `"KeyH"` | `0x48 (72)` | `0x48 (72)` | `0x48 (72)` | `0x48 (72)` | `0x48 (72)` | `0x48 (72)` | `0x48 (72)` | `0x48 (72)` |
| `"KeyI"` | `0x49 (73)` | `0x49 (73)` | `0x49 (73)` | `0x49 (73)` | `0x49 (73)` | `0x49 (73)` | `0x49 (73)` | `0x49 (73)` |
| `"KeyJ"` | `0x4A (74)` | `0x4A (74)` | `0x4A (74)` | `0x4A (74)` | `0x4A (74)` | `0x4A (74)` | `0x4A (74)` | `0x4A (74)` |
| `"KeyK"` | `0x4B (75)` | `0x4B (75)` | `0x4B (75)` | `0x4B (75)` | `0x4B (75)` | `0x4B (75)` | `0x4B (75)` | `0x4B (75)` |
| `"KeyL"` | `0x4C (76)` | `0x4C (76)` | `0x4C (76)` | `0x4C (76)` | `0x4C (76)` | `0x4C (76)` | `0x4C (76)` | `0x4C (76)` |
| `"KeyM"` | `0x4D (77)` | `0x4D (77)` | `0x4D (77)` | `0x4D (77)` | `0x4D (77)` | `0x4D (77)` | `0x4D (77)` | `0x4D (77)` |
| `"KeyN"` | `0x4E (78)` | `0x4E (78)` | `0x4E (78)` | `0x4E (78)` | `0x4E (78)` | `0x4E (78)` | `0x4E (78)` | `0x4E (78)` |
| `"KeyO"` | `0x4F (79)` | `0x4F (79)` | `0x4F (79)` | `0x4F (79)` | `0x4F (79)` | `0x4F (79)` | `0x4F (79)` | `0x4F (79)` |
| `"KeyP"` | `0x50 (80)` | `0x50 (80)` | `0x50 (80)` | `0x50 (80)` | `0x50 (80)` | `0x50 (80)` | `0x50 (80)` | `0x50 (80)` |
| `"KeyQ"` | `0x51 (81)` | `0x51 (81)` | `0x51 (81)` | `0x51 (81)` | `0xBA (186)⚠` | `0x51 (81)` | `0x51 (81)` | `0xBA (186)⚠` | `0x51 (81)` | `0x51 (81)` | `0xBA (186)⚠` | `0x51 (81)` | `0x51 (81)` | `0x51 (81)` | `0xBA (186)⚠` | `0x51 (81)` |
| `"KeyR"` | `0x52 (82)` | `0x52 (82)` | `0x52 (82)` | `0x52 (82)` | `0x52 (82)` | `0x52 (82)` | `0x52 (82)` | `0x52 (82)` |
| `"KeyS"` | `0x53 (83)` | `0x53 (83)` | `0x53 (83)` | `0x53 (83)` | `0x53 (83)` | `0x53 (83)` | `0x53 (83)` | `0x53 (83)` |
| `"KeyT"` | `0x54 (84)` | `0x54 (84)` | `0x54 (84)` | `0x54 (84)` | `0x54 (84)` | `0x54 (84)` | `0x54 (84)` | `0x54 (84)` |
| `"KeyU"` | `0x55 (85)` | `0x55 (85)` | `0x55 (85)` | `0x55 (85)` | `0x55 (85)` | `0x55 (85)` | `0x55 (85)` | `0x55 (85)` |
| `"KeyV"` | `0x56 (86)` | `0x56 (86)` | `0x56 (86)` | `0x56 (86)` | `0x56 (86)` | `0x56 (86)` | `0x56 (86)` | `0x56 (86)` |
| `"KeyW"` | `0x57 (87)` | `0x57 (87)` | `0x57 (87)` | `0x57 (87)` | `0x57 (87)` | `0x57 (87)` | `0x57 (87)` | `0x57 (87)` |
| `"KeyX"` | `0x58 (88)` | `0x58 (88)` | `0x58 (88)` | `0x58 (88)` | `0x58 (88)` | `0x58 (88)` | `0x58 (88)` | `0x58 (88)` |
| `"KeyY"` | `0x59 (89)` | `0x59 (89)` | `0x59 (89)` | `0x59 (89)` | `0x59 (89)` | `0x59 (89)` | `0x59 (89)` | `0x59 (89)` |
| `"KeyZ"` | `0x5A (90)` | `0x5A (90)` | `0x5A (90)` | `0x5A (90)` | `0x5A (90)` | `0x5A (90)` | `0x5A (90)` | `0x5A (90)` |
| `KeyboardEvent.code` | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| Internet Explorer 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |

標準的な位置（US レイアウトでは区切り記号）にある表示可能なキーによって発生する keydown イベントのブラウザー別の keyCode の値。| `KeyboardEvent.code` | IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |
| --- | --- | --- | --- | --- | --- |
|  | Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows (10.9) | Mac (10.9) | Linux (Ubuntu 14.04) |
|  | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 |
| `"Comma"` | `0xBC (188)` | `0xBC (188)` | `0xBC (188)` | `0xBC (188)` | `0xBC (188)` | `0xBC (188)` | `0xBC (188)` | `0xBC (188)` |
| `Shift` + `"Comma"` |
| `"Period"` | `0xBE (190)` | `0xBE (190)` | `0xBE (190)` | `0xBE (190)` | `0xBE (190)` | `0xBE (190)` | `0xBE (190)` | `0xBE (190)` |
| `Shift` + `"Period"` |
| `"Semicolon"` | `0xBA (186)` | `0xBB (187)`⚠ | `0xBA (186)` | `0xBA (186)` | `0xBB (187)`⚠ | `0xBA (186)` | `0xBA (186)` | `0xBA (186)` [1] | `0xE5 (229)`⚠ [2] | `0xBA (186)` | `0xBA (186)` | `0xE5 (229)`⚠ [3] | `0xBA (186)` | `0xBA (186)` [1] | `0xE5 (229)`⚠ [2] | `0x3B (59)` | `0x3B (59)` | `0x00 (0)`⚠ | `0x3B (59)` | `0x3B (59)` [1] | `0x00 (0)`⚠ | `0x3B (59)` | `0x3B (59)` | `0x00 (0)`⚠ |
| `Shift` + `"Semicolon"` | `0xBB (187)`⚠ [1] | `0xBB (187)`⚠ | `0xBB (187)`⚠ [1] |
| `"Quote"` | `0xDE (222)` | `0xBA (186)`⚠ | `0xDE (222)` | `0xDE (222)` | `0xBA (186)`⚠ | `0xDE (222)` | `0xDE (222)` | `0xBA (186)`⚠ [1] | `0xDE (222)` | `0xDE (222)` | `0xBA (186)`⚠ | `0xDE (222)` | `0xDE (222)` | `0xBA (186)`⚠ [1] | `0xDE (222)` | `0xDE (222)` | `0x3A (58)`⚠ | `0xDE (222)` | `0xDE (222)` | `0x3A (58)`⚠ [1] | `0xDE (222)` | `0xDE (222)` | `0x3A (58)`⚠ | `0xDE (222)` |
| `Shift` + `"Quote"` | `0xDE (222)`⚠ [1] | `0x38 (56)`⚠ | `0xDE (222)`⚠ [1] |
| `"BracketLeft"` | `0xDB (219)` | `0xC0(192)`⚠ | `0xDB (219)` | `0xDB (219)` | `0xC0(192)`⚠ | `0xDB (219)` | `0xDB (219)` | `0xDB (219)` [1] | `0xDB (219)` | `0xDB (219)` | `0x32 (50)`⚠ | `0xDB (219)` | `0xDB (219)` | `0xDB (219)` [1] | `0xDB (219)` | `0xDB (219)` | `0x40 (64)`⚠ | `0xDB (219)` | `0xDB (219)` | `0x40 (64)`⚠ [1] | `0xDB (219)` | `0xDB (219)` | `0x40 (64)`⚠ | `0xDB (219)` |
| `Shift` + `"BracketLeft"` | `0xC0 (192)`⚠ [1] | `0xC0 (192)`⚠ | `0xC0 (192)`⚠ [1] |
| `"BracketRight"` | `0xDD (221)` | `0xDB (219)`⚠ | `0xDD (221)` | `0xDD (221)` | `0xDB (219)`⚠ | `0xDD (221)` | `0xDD (221)` | `0xDB (219)`⚠ [1] | `0xDD (221)` | `0xDD (221)` | `0xDB (219)`⚠ | `0xDD (221)` | `0xDD (221)` | `0xDB (219)`⚠ [1] | `0xDD (221)` | `0xDD (221)` | `0xDB (219)`⚠ | `0xDD (221)` | `0xDD (221)` | `0xDB (219)`⚠ [1] | `0xDD (221)` | `0xDD (221)` | `0xDB (219)`⚠ | `0xDD (221)` |
| `Shift` + `"BracketRight"` |
| `"Backquote"` | `0xC0 (192)` | `❌ N/A` | `0xC0 (192)` | `0xC0 (192)` | `❌ N/A` | `0xC0 (192)` | `0xC0 (192)` | `0xC0 (192)` | `0xF4 (244)`⚠ | `0xC0 (192)` | `0xC0 (192)` | `0xC0 (192)` | `❌ N/A` | `0xC0 (192)` | `0xC0 (192)` | `0xC0 (192)` | `0x00 (0)` | `0xC0 (192)` |
| `Shift` + `"Backquote"` |
| `"Backslash"` | `0xDC (220)` | `0xDD (221)`⚠ | `0xDC (220)` | `0xDC (220)` | `0xDD (221)`⚠ | `0xDC (220)` | `0xDC (220)` | `0xDC (220)` | `0xDD (221)`⚠ | `0xDC (220)` | `0xDC (220)` | `0xDC (220)` | `0xDD (221)`⚠ | `0xDC (220)` | `0xDC (220)` | `0xDC (220)` | `0xDD (221)`⚠ | `0xDC (220)` |
| `Shift` + `"Backslash"` |
| `"Minus"` | `0xBD (189)` | `0xBD (189)` | `0xBD (189)` | `0xBD (189)` [1] | `0xBD (189)` | `0xBD (189)` | `0xBD (189)` | `0xBD (189)` | `0xBD (189)` | `0xBD (189)` [1] | `0xBD (189)` | `0xAD (173)` | `0xAD (173)` | `0xAD (173)`[1] | `0xAD (173)` | `0xAD (173)` |
| `Shift` + `"Minus"` | `0xBB (187)`⚠ [1] | `0xBB (187)`⚠ | `0xBD (189)` | `0xBB (187)`⚠ [1] | `0xBD (189)` |
| `"Equal"` | `0xBB (187)` | `0xDE (222)`⚠ | `0xBB (187)` | `0xBB (187)` | `0xDE (222)`⚠ | `0xBB (187)` | `0xBB (187)` | `0xBB (187)` [1] | `0xBB (187)` | `0xBB (187)` | `0x36 (54)`⚠ | `0xBB (187)` | `0xBB (187)` | `0xBB (187)`[1] | `0xBB (187)` | `0x3D (61)` | `0xA0 (160)`⚠ | `0x3D (61)` | `0x3D (61)` | `0xA0 (160)`⚠ [1] | `0x3D (61)` | `0x3D (61)` | `0xA0 (160)`⚠ | `0x3D (61)` |
| `Shift` + `"Equal"` | `0xC0 (192)`⚠ [1] | `0xC0 (192)`⚠ | `0xBB (187)` | `0xC0 (192)`⚠ [1] | `0xBB (187)` |
| `"IntlRo"` | `0xC1 (193)` | `0xE2 (226)`⚠ | `0xC1 (193)` | `0xC1 (193)` | `0xE2 (226)`⚠ | `0xC1 (193)` | `0xBD (189)` | `0xBD (189)` | `0x00 (0)`⚠ | [4] | `0xDC (220)`⚠ | [4] | `0xBD (189)` | `0xBD (189)` | `0xE5 (229)`⚠ [5] | `0x00 (0)` | `0xDC (220)`⚠ | `0x00 (0)` | `0xA7 (167)` | `0xA7 (167)` | `0x00 (0)` | `0x00 (0)` | `0xDC (220)`⚠ | `0x00 (0)` |
| `Shift` + `"IntlRo"` |
| `"IntlYen"` | `0xFF (255)` | `0xDC (220)`⚠ | `0xFF (255)` | `0xFF (255)` | `0xDC (220)`⚠ | `0xFF (255)` | `0x00 (0)`⚠ | `0x00 (0)`⚠ | `0x00 (0)`⚠ | [4] | `0xDC (220)`⚠ | [4] | `0x00 (0)`⚠ | `0x00 (0)`⚠ | `0xE5 (229)`⚠ [5] | `0x00 (0)`⚠ | `0xDC (220)`⚠ | `0x00 (0)`⚠ | `0xDC` (220) | `0xDC` (220) | `0x00 (0)`⚠ | `0x00 (0)`⚠ | `0xDC (220)`⚠ | `0x00 (0)`⚠ |
| `Shift` + `"IntlYen"` | `0xDC (220)` | `0xDC (220)` | `0xBD (189)`⚠ | `0xDC (220)` | `0xDC (220)` |
| `KeyboardEvent.code` | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 | 米国 | 日本語 | ギリシャ語 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| Internet Explorer 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |

[1] JIS キーボードから入力される値です。 ANSI キーボードを使用すると、 US キーボードレイアウトから選択した keyCode 値と入力文字になります。

[2] このキーはデッドキーです。イベント `keyup` の値は `0xBA (186)` です。

[3] このキーはデッドキーです。イベント `keyup` の値は `0x10 (16)` です。

[4] キーイベントは発行されない。

[5] ギリシャ語キーボードレイアウトでは、そのキーは使用できません（いかなる文字も入力しません）。イベント `keyup` の値は `0x00 (0)` です。

### 非表示キー（機能キー）

修飾キーによって発生する keydown イベントのブラウザー別の keyCode の値| `KeyboardEvent.code` | IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |
| --- | --- | --- | --- | --- | --- |
| Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| `"AltLeft"` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` |
| `"AltRight"` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` | `0x12 (18)` |
| `"AltRight"` （`"AltGraph"` キーであった場合） | [1] | [1] | ❌N/A | `0xE1 (225)`⚠ | ❌ N/A | [1] | ❌ N/A | `0xE1 (225)`⚠ |
| `"CapsLock"` | `0x14 (20)` [2] | `0x14 (20)` [2] | `0x14 (20)` | `0x14 (20)` | `0x14 (20)` | `0x14 (20)` [2] | `0x14 (20)` | `0x14 (20)` [3] |
| `"ControlLeft"` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` |
| `"ControlRight"` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` | `0x11 (17)` |
| `"MetaLeft"` | `0x5B (91)` | `0x5B (91)` | `0x5B (91)` | `0x5B (91)` | `0x5B (91)` | `0x5B (91)` | `0xE0 (224)`⚠ | `0x5B (91)` |
| `"MetaRight"` | `0x5C (92)` | `0x5C (92)` | `0x5D (93)`⚠ | `0x5C (92)` | `0x5D (93)`⚠ | `0x5B (91)`⚠ | `0xE0 (224)`⚠ | `0x5B (91)`⚠ |
| `"ShiftLeft"` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` |
| `"ShiftRight"` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` | `0x10 (16)` |
| `KeyboardEvent.code` | Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |

[1] Windows では、 `AltGraph` キーを押すと `"ControlLeft"` と `"AltRight"` の両方のキーイベントを発行します。

[2] 日本語キーボードレイアウトがアクティブである場合、 `CapsLock` キーを `Shift` なしで押すと `0xF0 (240)` が発生します。このキーは `Alphanumeric` キー (`"英数"`) として動作します。

[3] 日本語キーボードレイアウトがアクティブである場合、 `CapsLock` キーを `Shift` なしで押すと `0x00 (0)` が発生します。このキーは `Alphanumeric` キー (`"英数"`) として動作します。

非表示キーによって発生した keydown イベントのブラウザー別の keyCode の値| `KeyboardEvent.code` | IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |
| --- | --- | --- | --- | --- | --- |
| Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| `"ContextMenu"` | `0x5D (93)` | `0x5D (93)` | `0x00 (0)`⚠ [1] | `0x5D (93)` | `0x00 (0)`⚠ [1] | `0x5D (93)` | `0x5D (93)` | `0x5D (93)` |
| `"Enter"` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` |
| `"Space"` | `0x20 (32)` | `0x20 (32)` | `0x20 (32)` | `0x20 (32)` | `0x20 (32)` | `0x20 (32)` | `0x20 (32)` | `0x20 (32)` |
| `"Tab"` | `0x09 (9)` | `0x09 (9)` | `0x09 (9)` | `0x09 (9)` | `0x09 (9)` | `0x09 (9)` | `0x09 (9)` | `0x09 (9)` |
| `"Delete"` | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` |
| `"End"` | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` |
| `"Help"` | ❌ N/A | ❌ N/A | `0x2D (45)`⚠ [2] | `0x2F (47)`⚠ [3] | `0x2D (45)`⚠ [2] | ❌ N/A | `0x2D (45)`⚠ [2] | `0x06 (6)`⚠ [3] |
| `"Home"` | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` |
| `"Insert"` | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` |
| `"PageDown"` | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` |
| `"PageUp"` | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` |
| `"ArrowDown"` | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` |
| `"ArrowLeft"` | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` |
| `"ArrowRight"` | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` |
| `"ArrowUp"` | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` |
| `"Escape"` | `0x1B (27)` | `0x1B (27)` | `0x1B (27)` | `0x1B (27)` | `0x1B (27)` | `0x1B (27)` | `0x1B (27)` | `0x1B (27)` |
| `"PrintScreen"` | `0x2C (44)` [4] | `0x2C (44)` [4] | `0x7C (124)`⚠ [5] | `0x2A (42)`⚠ | `0x7C (124)`⚠ [5] | `0x2C (44)` [4] | `0x2C (44)` | `0x2A (42)`⚠ |
| `"ScrollLock"` | `0x91 (145)` | `0x91 (145)` | `0x7D (125)`⚠ [5] | `0x91 (145)` | `0x7D (125)`⚠ [5] | `0x91 (145)` | `0x91 (145)` | `0x91 (145)` |
| `"Pause"` | `0x13 (19)` [6] | `0x13 (19)` [6] | `0x7E (126)`⚠ [5] | `0x13 (19)` | `0x7E (126)`⚠ [5] | `0x13 (19)` [6] | `0x13 (19)` | `0x13 (19)` |
| `KeyboardEvent.code` | Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |

[1] `keypress` イベントが発行され、その `keyCode` と `charCode` は `0x10 (16)` になりますが、実際にはテキストはエディターに入力されません。

[2] Mac では、 `Help` キーは PC のキーボードの `Insert` キーに割り当てられています。これらの `keyCode` 値は `Insert` キーの `keyCode` 値と同じです。

[3] Fedora 20 でテストしました。

[4] `keyup` イベントのみが発生します。

[5] PC の `PrintScreen`, `ScrollLock`, `Pause` はそれぞれ Mac の `F13`, `F14`, `F15` に割り当てられます。 Chrome と Safari はこれらを Mac のキーと同じ `keyCode` 値に割り当てています。

[6] `Pause` キーを `Control` 付きで推すと `0x03 (3)` を生成します。

機能キーによる keydown イベントのブラウザー別の keyCode の値| `KeyboardEvent.code` | IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |
| --- | --- | --- | --- | --- | --- |
| Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| `"F1"` | `0x70 (112)` | `0x70 (112)` | `0x70 (112)` | `0x70 (112)` | `0x70 (112)` | `0x70 (112)` | `0x70 (112)` | `0x70 (112)` |
| `"F2"` | `0x71 (113)` | `0x71 (113)` | `0x71 (113)` | `0x71 (113)` | `0x71 (113)` | `0x71 (113)` | `0x71 (113)` | `0x71 (113)` |
| `"F3"` | `0x72 (114)` | `0x72 (114)` | `0x72 (114)` | `0x72 (114)` | `0x72 (114)` | `0x72 (114)` | `0x72 (114)` | `0x72 (114)` |
| `"F4"` | `0x73 (115)` | `0x73 (115)` | `0x73 (115)` | `0x73 (115)` | `0x73 (115)` | `0x73 (115)` | `0x73 (115)` | `0x73 (115)` |
| `"F5"` | `0x74 (116)` | `0x74 (116)` | `0x74 (116)` | `0x74 (116)` | `0x74 (116)` | `0x74 (116)` | `0x74 (116)` | `0x74 (116)` |
| `"F6"` | `0x75 (117)` | `0x75 (117)` | `0x75 (117)` | `0x75 (117)` | `0x75 (117)` | `0x75 (117)` | `0x75 (117)` | `0x75 (117)` |
| `"F7"` | `0x76 (118)` | `0x76 (118)` | `0x76 (118)` | `0x76 (118)` | `0x76 (118)` | `0x76 (118)` | `0x76 (118)` | `0x76 (118)` |
| `"F8"` | `0x77 (119)` | `0x77 (119)` | `0x77 (119)` | `0x77 (119)` | `0x77 (119)` | `0x77 (119)` | `0x77 (119)` | `0x77 (119)` |
| `"F9"` | `0x78 (120)` | `0x78 (120)` | `0x78 (120)` | `0x78 (120)` | `0x78 (120)` | `0x78 (120)` | `0x78 (120)` | `0x78 (120)` |
| `"F10"` | `0x79 (121)` | `0x79 (121)` | `0x79 (121)` | `0x79 (121)` | `0x79 (121)` | `0x79 (121)` | `0x79 (121)` | `0x79 (121)` |
| `"F11"` | `0x7A (122)` | `0x7A (122)` | `0x7A (122)` | `0x7A (122)` | `0x7A (122)` | `0x7A (122)` | `0x7A (122)` | `0x7A (122)` |
| `"F12"` | `0x7B (123)` | `0x7B (123)` | `0x7B (123)` | `0x7B (123)` | `0x7B (123)` | `0x7B (123)` | `0x7B (123)` | `0x7B (123)` |
| `"F13"` | `0x7C (124)` | `0x7C (124)` | `0x7C (124)` | `0x7C (124)` [1] | `0x7C (124)` | `0x7C (124)` | `0x2C (44)` ⚠ [2] | `0x00 (0)`⚠ [3] |
| `"F14"` | `0x7D (125)` | `0x7D (125)` | `0x7D (125)` | `0x7D (125)` [1] | `0x7D (125)` | `0x7D (125)` | `0x91 (145)` ⚠ [2] | `0x00 (0)`⚠ [3] |
| `"F15"` | `0x7E (126)` | `0x7E (126)` | `0x7E (126)` | `0x7E (126)` [1] | `0x7E (126)` | `0x7E (126)` | `0x13 (19)` ⚠ [2] | `0x00 (0)`⚠ [3] |
| `"F16"` | `0x7F (127)` | `0x7F (127)` | `0x7F (127)` | `0x7F (127)` [1] | `0x7F (127)` | `0x7F (127)` | `0x7F (127)` | `0x00 (0)`⚠ [3] |
| `"F17"` | `0x80 (128)` | `0x80 (128)` | `0x80 (128)` | `0x80 (128)` [1] | `0x80 (128)` | `0x80 (128)` | `0x80 (128)` | `0x00 (0)`⚠ [3] |
| `"F18"` | `0x81 (129)` | `0x81 (129)` | `0x81 (129)` | `0x81 (129)` [1] | `0x81 (129)` | `0x81 (129)` | `0x81 (129)` | `0x00 (0)`⚠ [3] |
| `"F19"` | `0x82 (130)` | `0x82 (130)` | `0x82 (130)` | ❌ `N/A` [4] | `0x82 (130)` | `0x82 (130)` | `0x82 (130)` | `0x00 (0)`⚠ [3] |
| `"F20"` | `0x83 (131)` | `0x83 (131)` | `0x83 (131)` | ❌ `N/A` [4] | `0xE5 (229)`⚠ [5] | `0x83 (131)` | `0x00 (0)`⚠ | ❌ `N/A` [6] |
| `"F21"` | `0x84 (132)` | `0x84 (132)` | `0x00 (0)`⚠ [7] | ❌ `N/A` [4] | `0x00 (0)`⚠ [7] | `0x84 (132)` | ❌ `N/A` [8] | ❌ `N/A` [6] |
| `"F22"` | `0x85 (133)` | `0x85 (133)` | `0x00 (0)`⚠ [7] | ❌ `N/A` [4] | `0x00 (0)`⚠ [7] | `0x85 (133)` | ❌ `N/A` [8] | ❌ `N/A` [6] |
| `"F23"` | `0x86 (134)` | `0x86 (134)` | `0x00 (0)`⚠ [7] | ❌ `N/A` [4] | `0x00 (0)`⚠ [7] | `0x86 (134)` | ❌ `N/A` [8] | ❌ `N/A` [6] |
| `"F24"` | `0x87 (135)` | `0x87 (135)` | `0x00 (0)`⚠ [7] | ❌ `N/A` [4] | `0x00 (0)`⚠ [7] | `0x87 (135)` | ❌ `N/A` [8] | `0x00 (0)`⚠ [3] |
| `KeyboardEvent.code` | Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |

[1] Fedora 20 でテストしました。

[2] PC では、`PrintScreen`、`ScrollLock`、`Pause` はそれぞれ Mac の `F13`、`F14`、`F15` に割り当てられています。Firefox はそれらに、PC のキーと同じ `keyCode` 値を設定します。

[3] Fedora 20 でテストしました。 このキーは `GDK_Fxx` の keysyms を発生させません。キーが適切な keysyms を発生させる場合、これらの値は IE と同じでなければなりません。

[4] Fedora 20 でテストしました。 Chromium では、このキーは DOM キーイベントを発生させません。

[5] `keyUp` イベントの `keyCode` の値は `0x83 (131)` です。

[6] Fedora 20 でテストしました。 Firefox では、このキーは DOM キーイベントを発生させません。

[7] `keydown` イベントのみが発行されます。

[8] Firefox では、 DOM キーイベントは発行されません。

### テンキー

NumLock 状態のテンキーで発生した keydown イベントのそれぞれのブラウザーの keyCode の値| `KeyboardEvent.code` | IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |
| --- | --- | --- | --- | --- | --- |
| Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| `"NumLock"` | `0x90 (144)` | `0x90 (144)` | `0x0C (12)`⚠ [1] | `0x90 (144)` | `0x0C (12)`⚠ [1] | `0x90 (144)` | `0x0C (12)`⚠ [1] | `0x90 (144)` |
| `"Numpad0"` | `0x60 (96)` | `0x60 (96)` | `0x60 (96)` | `0x60 (96)` | `0x60 (96)` | `0x60 (96)` | `0x60 (96)` | `0x60 (96)` |
| `"Numpad1"` | `0x61 (97)` | `0x61 (97)` | `0x61 (97)` | `0x61 (97)` | `0x61 (97)` | `0x61 (97)` | `0x61 (97)` | `0x61 (97)` |
| `"Numpad2"` | `0x62 (98)` | `0x62 (98)` | `0x62 (98)` | `0x62 (98)` | `0x62 (98)` | `0x62 (98)` | `0x62 (98)` | `0x62 (98)` |
| `"Numpad3"` | `0x63 (99)` | `0x63 (99)` | `0x63 (99)` | `0x63 (99)` | `0x63 (99)` | `0x63 (99)` | `0x63 (99)` | `0x63 (99)` |
| `"Numpad4"` | `0x64 (100)` | `0x64 (100)` | `0x64 (100)` | `0x64 (100)` | `0x64 (100)` | `0x64 (100)` | `0x64 (100)` | `0x64 (100)` |
| `"Numpad5"` | `0x65 (101)` | `0x65 (101)` | `0x65 (101)` | `0x65 (101)` | `0x65 (101)` | `0x65 (101)` | `0x65 (101)` | `0x65 (101)` |
| `"Numpad6"` | `0x66 (102)` | `0x66 (102)` | `0x66 (102)` | `0x66 (102)` | `0x66 (102)` | `0x66 (102)` | `0x66 (102)` | `0x66 (102)` |
| `"Numpad7"` | `0x67 (103)` | `0x67 (103)` | `0x67 (103)` | `0x67 (103)` | `0x67 (103)` | `0x67 (103)` | `0x67 (103)` | `0x67 (103)` |
| `"Numpad8"` | `0x68 (104)` | `0x68 (104)` | `0x68 (104)` | `0x68 (104)` | `0x68 (104)` | `0x68 (104)` | `0x68 (104)` | `0x68 (104)` |
| `"Numpad9"` | `0x69 (105)` | `0x69 (105)` | `0x69 (105)` | `0x69 (105)` | `0x69 (105)` | `0x69 (105)` | `0x69 (105)` | `0x69 (105)` |
| `"NumpadAdd"` | `0x6B (107)` | `0x6B (107)` | `0x6B (107)` | `0x6B (107)` | `0x6B (107)` | `0x6B (107)` | `0x6B (107)` | `0x6B (107)` |
| `"NumpadComma"` （`","` を入力） | `0xC2 (194)` | `0xC2 (194)` | `0xBC (188)`⚠ | ❌ *常に `"."` を入力* | `0xBC (188)`⚠ | `0xC2 (194)` | `0x6C (108)`⚠ | ❌ *常に `"."` を入力* |
| `"NumpadComma"` （`"."` または空文字列を入力） | `0xC2 (194)` | `0xC2 (194)` | `0xBE (190)`⚠ | `0x6E (110)`⚠ | `0xBE (190)`⚠ | `0xC2 (194)` | `0x6C (108)`⚠ | `0x6E (110)`⚠ |
| `"NumpadDecimal"` （`"."` を入力） | `0x6E (110)` | `0x6E (110)` | `0x6E (110)` | `0x6E (110)` | `0x6E (110)` | `0x6E (110)` | `0x6E (110)` | `0x6E (110)` |
| `"NumpadDecimal"` （`","` を入力） | `0x6E (110)` | `0x6E (110)` | `0x6E (110)` | `0x6C (108)`⚠ | `0x6E (110)` | `0x6E (110)` | `0x6E (110)` | `0x6C (108)`⚠ |
| `"NumpadDivide"` | `0x6F (111)` | `0x6F (111)` | `0x6F (111)` | `0x6F (111)` | `0x6F (111)` | `0x6F (111)` | `0x6F (111)` | `0x6F (111)` |
| `"NumpadEnter"` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` | `0x0D (13)` |
| `"NumpadEqual"` | `0x0C (12)` | `0x0C (12)` | `0xBB (187)`⚠ | `0xBB (187)`⚠ | `0xBB (187)`⚠ | `0x0C (12)` | `0x3D (61)`⚠ | `0x3D (61)`⚠ |
| `"NumpadMultiply"` | `0x6A (106)` | `0x6A (106)` | `0x6A (106)` | `0x6A (106)` | `0x6A (106)` | `0x6A (106)` | `0x6A (106)` | `0x6A (106)` |
| `"NumpadSubtract"` | `0x6D (109)` | `0x6D (109)` | `0x6D (109)` | `0x6D (109)` | `0x6D (109)` | `0x6D (109)` | `0x6D (109)` | `0x6D (109)` |
| `KeyboardEvent.code` | Windows | Windows | Mac (10.9) | Linux (Ubuntu 14.04) | Mac (10.9) | Windows | Mac (10.9) | Linux (Ubuntu 14.04) |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| IE 11 | Google Chrome 34 | Chromium 34 | Safari 7 | Gecko 29 |

[1] `"NumLock"` キーは Mac では `"Clear"` キーとして動作します。

NumLock 状態でないテンキーで発生した keydown イベントのブラウザー別の keyCode の値| `KeyboardEvent.code` | IE 11 | Google Chrome 34 | Chromium 34 | Gecko 29 |
| --- | --- | --- | --- | --- |
| Windows | Windows | Linux (Ubuntu 14.04) | Windows | Linux (Ubuntu 14.04) |
| `"Numpad0"` (`"Insert"`) | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` | `0x2D (45)` |
| `"Numpad1"` (`"End"`) | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` | `0x23 (35)` |
| `"Numpad2"` (`"ArrowDown"`) | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` | `0x28 (40)` |
| `"Numpad3"` (`"PageDown"`) | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` | `0x22 (34)` |
| `"Numpad4"` (`"ArrowLeft"`) | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` | `0x25 (37)` |
| `"Numpad5"` | `0x0C (12)` | `0x0C (12)` | `0x0C (12)` | `0x0C (12)` | `0x0C (12)` |
| `"Numpad6"` (`"ArrowRight"`) | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` | `0x27 (39)` |
| `"Numpad7"` (`"Home"`) | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` | `0x24 (36)` |
| `"Numpad8"` (`"ArrowUp"`) | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` | `0x26 (38)` |
| `"Numpad9"` (`"PageUp"`) | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` | `0x21 (33)` |
| `"NumpadDecimal"` (`"Delete"`) | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` | `0x2E (46)` |
| `KeyboardEvent.code` | Windows | Windows | Linux (Ubuntu 14.04) | Windows | Linux (Ubuntu 14.04) |
| --- | --- | --- | --- | --- | --- |
| IE 11 | Google Chrome 34 | Chromium 34 | Gecko 29 |

**メモ:** 最近の Mac には `NumLock` キーがないので、状態が分かりません。そのため、ロック解除の状態が利用できません。

keyCode 値の定数
------------

Gecko は、対応表を明示的に作成するために、`KeyboardEvent` に多くの `keyCode` 値を定義しています。これらの値は、Firefox のアドオン開発者にとっては便利ですが、一般的なウェブページではあまり有用ではありません。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `DOM_VK_CANCEL` | 0x03 (3) | キャンセルキー。 |
| `DOM_VK_HELP` | 0x06 (6) | Help キー。 |
| `DOM_VK_BACK_SPACE` | 0x08 (8) | Backspace キー。 |
| `DOM_VK_TAB` | 0x09 (9) | Tab キー。 |
| `DOM_VK_CLEAR` | 0x0C (12) | NumLock を解除した状態における、テンキーの "5" キー。 Mac の場合は、 NumLock キーと同じ位置にあるクリアキーを押します。 |
| `DOM_VK_RETURN` | 0x0D (13) | メインキーボードのリターン/エンターキー。 |
| `DOM_VK_ENTER` | 0x0E (14) |
 予約済みですが、使用されていません。
非推奨
 （削除。
 [Firefox バグ 969247](https://bugzil.la/969247) を参照）
  |
| `DOM_VK_SHIFT` | 0x10 (16) | Shift キー。 |
| `DOM_VK_CONTROL` | 0x11 (17) | Control キー。 |
| `DOM_VK_ALT` | 0x12 (18) | Alt （Mac では Option）キー。 |
| `DOM_VK_PAUSE` | 0x13 (19) | Pause キー。 |
| `DOM_VK_CAPS_LOCK` | 0x14 (20) | Caps lock。 |
| `DOM_VK_KANA` | 0x15 (21) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_HANGUL` | 0x15 (21) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_EISU` | 0x 16 (22) | 日本語の Mac キーボードの "英数" キー。 |
| `DOM_VK_JUNJA` | 0x17 (23) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_FINAL` | 0x18 (24) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_HANJA` | 0x19 (25) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_KANJI` | 0x19 (25) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_ESCAPE` | 0x1B (27) | Escape キー。 |
| `DOM_VK_CONVERT` | 0x1C (28) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_NONCONVERT` | 0x1D (29) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_ACCEPT` | 0x1E (30) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_MODECHANGE` | 0x1F (31) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_SPACE` | 0x20 (32) | スペースバー。 |
| `DOM_VK_PAGE_UP` | 0x21 (33) | Page Up キー。 |
| `DOM_VK_PAGE_DOWN` | 0x22 (34) | Page Down キー。 |
| `DOM_VK_END` | 0x23 (35) | End キー。 |
| `DOM_VK_HOME` | 0x24 (36) | Home キー。 |
| `DOM_VK_LEFT` | 0x25 (37) | 左矢印。 |
| `DOM_VK_UP` | 0x26 (38) | 上矢印。 |
| `DOM_VK_RIGHT` | 0x27 (39) | 右矢印。 |
| `DOM_VK_DOWN` | 0x28 (40) | 下矢印。 |
| `DOM_VK_SELECT` | 0x29 (41) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_PRINT` | 0x2A (42) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_EXECUTE` | 0x2B (43) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_PRINTSCREEN` | 0x2C (44) | Print Screen キー。 |
| `DOM_VK_INSERT` | 0x2D (45) | Ins(ert) キー。 |
| `DOM_VK_DELETE` | 0x2E (46) | Del(ete) キー。 |
| `DOM_VK_0` | 0x30 (48) | "0" キー（メインキー）。 |
| `DOM_VK_1` | 0x31 (49) | "1" キー（メインキー）。 |
| `DOM_VK_2` | 0x32 (50) | "2" キー（メインキー）。 |
| `DOM_VK_3` | 0x33 (51) | "3" キー（メインキー）。 |
| `DOM_VK_4` | 0x34 (52) | "4" キー（メインキー）。 |
| `DOM_VK_5` | 0x35 (53) | "5" キー（メインキー）。 |
| `DOM_VK_6` | 0x36 (54) | "6" キー（メインキー）。 |
| `DOM_VK_7` | 0x37 (55) | "7" キー（メインキー）。 |
| `DOM_VK_8` | 0x38 (56) | "8" キー（メインキー）。 |
| `DOM_VK_9` | 0x39 (57) | "9" キー（メインキー）。 |
| `DOM_VK_COLON` | 0x3A (58) | コロン (":") キー。 |
| `DOM_VK_SEMICOLON` | 0x3B (59) | セミコロン (";") キー。 |
| `DOM_VK_LESS_THAN` | 0x3C (60) | 小なり ("<") キー。 |
| `DOM_VK_EQUALS` | 0x3D (61) | 等号 ("=") キー。 |
| `DOM_VK_GREATER_THAN` | 0x3E (62) | 大なり (">") キー。 |
| `DOM_VK_QUESTION_MARK` | 0x3F (63) | 疑問符 ("?") キー。 |
| `DOM_VK_AT` | 0x40 (64) | アットマーク ("@") キー。 |
| `DOM_VK_A` | 0x41 (65) | "A" キー。 |
| `DOM_VK_B` | 0x42 (66) | "B" キー。 |
| `DOM_VK_C` | 0x43 (67) | "C" キー。 |
| `DOM_VK_D` | 0x44 (68) | "D" キー。 |
| `DOM_VK_E` | 0x45 (69) | "E" キー。 |
| `DOM_VK_F` | 0x46 (70) | "F" キー。 |
| `DOM_VK_G` | 0x47 (71) | "G" キー。 |
| `DOM_VK_H` | 0x48 (72) | "H" キー。 |
| `DOM_VK_I` | 0x49 (73) | "I" キー。 |
| `DOM_VK_J` | 0x4A (74) | "J" キー。 |
| `DOM_VK_K` | 0x4B (75) | "K" キー。 |
| `DOM_VK_L` | 0x4C (76) | "L" キー。 |
| `DOM_VK_M` | 0x4D (77) | "M" キー。 |
| `DOM_VK_N` | 0x4E (78) | "N" キー。 |
| `DOM_VK_O` | 0x4F (79) | "O" キー。 |
| `DOM_VK_P` | 0x50 (80) | "P" キー。 |
| `DOM_VK_Q` | 0x51 (81) | "Q" キー。 |
| `DOM_VK_R` | 0x52 (82) | "R" キー。 |
| `DOM_VK_S` | 0x53 (83) | "S" キー。 |
| `DOM_VK_T` | 0x54 (84) | "T" キー。 |
| `DOM_VK_U` | 0x55 (85) | "U" キー。 |
| `DOM_VK_V` | 0x56 (86) | "V" キー。 |
| `DOM_VK_W` | 0x57 (87) | "W" キー。 |
| `DOM_VK_X` | 0x58 (88) | "X" キー。 |
| `DOM_VK_Y` | 0x59 (89) | "Y" キー。 |
| `DOM_VK_Z` | 0x5A (90) | "Z" キー。 |
| `DOM_VK_WIN` | 0x5B (91) | Windows では Windows ロゴキー。 Linux ではスーパー／ハイパーキー。 |
| `DOM_VK_CONTEXT_MENU` | 0x5D (93) | コンテキストメニューを開くキー。 |
| `DOM_VK_SLEEP` | 0x5F (95) | このキーコードの Linux 対応は Gecko 4.0 で追加されました。 |
| `DOM_VK_NUMPAD0` | 0x60 (96) | "0" キー（テンキー）。 |
| `DOM_VK_NUMPAD1` | 0x61 (97) | "1" キー（テンキー）。 |
| `DOM_VK_NUMPAD2` | 0x62 (98) | "2" キー（テンキー）。 |
| `DOM_VK_NUMPAD3` | 0x63 (99) | "3" キー（テンキー）。 |
| `DOM_VK_NUMPAD4` | 0x64 (100) | "4" キー（テンキー）。 |
| `DOM_VK_NUMPAD5` | 0x65 (101) | "5" キー（テンキー）。 |
| `DOM_VK_NUMPAD6` | 0x66 (102) | "6" キー（テンキー）。 |
| `DOM_VK_NUMPAD7` | 0x67 (103) | "7" キー（テンキー）。 |
| `DOM_VK_NUMPAD8` | 0x68 (104) | "8" キー（テンキー）。 |
| `DOM_VK_NUMPAD9` | 0x69 (105) | "9" キー（テンキー）。 |
| `DOM_VK_MULTIPLY` | 0x6A (106) | "\*" キー（テンキー）。 |
| `DOM_VK_ADD` | 0x6B (107) | "+" キー（テンキー）。 |
| `DOM_VK_SEPARATOR` | 0x6C (108) |  |
| `DOM_VK_SUBTRACT` | 0x6D (109) | "-" キー（テンキー）。 |
| `DOM_VK_DECIMAL` | 0x6E (110) | テンキーの浮動小数点キー。 |
| `DOM_VK_DIVIDE` | 0x6F (111) | "/" キー（テンキー）。 |
| `DOM_VK_F1` | 0x70 (112) | F1 キー。 |
| `DOM_VK_F2` | 0x71 (113) | F2 キー。 |
| `DOM_VK_F3` | 0x72 (114) | F3 キー。 |
| `DOM_VK_F4` | 0x73 (115) | F4 キー。 |
| `DOM_VK_F5` | 0x74 (116) | F5 キー。 |
| `DOM_VK_F6` | 0x75 (117) | F6 キー。 |
| `DOM_VK_F7` | 0x76 (118) | F7 キー。 |
| `DOM_VK_F8` | 0x77 (119) | F8 キー。 |
| `DOM_VK_F9` | 0x78 (120) | F9 キー。 |
| `DOM_VK_F10` | 0x79 (121) | F10 キー。 |
| `DOM_VK_F11` | 0x7A (122) | F11 キー。 |
| `DOM_VK_F12` | 0x7B (123) | F12 キー。 |
| `DOM_VK_F13` | 0x7C (124) | F13 キー。 |
| `DOM_VK_F14` | 0x7D (125) | F14 キー。 |
| `DOM_VK_F15` | 0x7E (126) | F15 キー。 |
| `DOM_VK_F16` | 0x7F (127) | F16 キー。 |
| `DOM_VK_F17` | 0x80 (128) | F17 キー。 |
| `DOM_VK_F18` | 0x81 (129) | F18 キー。 |
| `DOM_VK_F19` | 0x82 (130) | F19 キー。 |
| `DOM_VK_F20` | 0x83 (131) | F20 キー。 |
| `DOM_VK_F21` | 0x84 (132) | F21 キー。 |
| `DOM_VK_F22` | 0x85 (133) | F22 キー。 |
| `DOM_VK_F23` | 0x86 (134) | F23 キー。 |
| `DOM_VK_F24` | 0x87 (135) | F24 キー。 |
| `DOM_VK_NUM_LOCK` | 0x90 (144) | Num Lock キー。 |
| `DOM_VK_SCROLL_LOCK` | 0x91 (145) | Scroll Lock キー。 |
| `DOM_VK_WIN_OEM_FJ_JISHO` | 0x92 (146) | Windows の OEM 固有キー。
 これは富士通の OASYS で「辞書」キーに使われていました。
  |
| `DOM_VK_WIN_OEM_FJ_MASSHOU` | 0x93 (147) | Windows の OEM 固有キー。
 これは富士通の OASYS で「単語登録解除」キーに使われていました。
  |
| `DOM_VK_WIN_OEM_FJ_TOUROKU` | 0x94 (148) | Windows の OEM 固有キー。
 これは富士通の OASYS で「単語登録」キーに使われていました。
  |
| `DOM_VK_WIN_OEM_FJ_LOYA` | 0x95 (149) | Windows の OEM 固有キー。
 これは富士通の OASYS で「左親指シフト」キーに使われていました。
  |
| `DOM_VK_WIN_OEM_FJ_ROYA` | 0x96 (150) |
 An
 Windows の OEM 固有キー。
 これは富士通の OASYS で「右親指シフト」キーに使われていました。
  |
| `DOM_VK_CIRCUMFLEX` | 0xA0 (160) | サーカムフレックス ("^") キー。 |
| `DOM_VK_EXCLAMATION` | 0xA1 (161) | 感嘆符 ("!") キー。 |
| `DOM_VK_DOUBLE_QUOTE` | 0xA3 (162) | 二重引用符 (""") キー。 |
| `DOM_VK_HASH` | 0xA3 (163) | ハッシュ ("#") キー。 |
| `DOM_VK_DOLLAR` | 0xA4 (164) | ドル記号 ("$") キー。 |
| `DOM_VK_PERCENT` | 0xA5 (165) | パーセント ("%") キー。 |
| `DOM_VK_AMPERSAND` | 0xA6 (166) | アンパーサンド ("&") キー。 |
| `DOM_VK_UNDERSCORE` | 0xA7 (167) | アンダースコア ("\_") キー。 |
| `DOM_VK_OPEN_PAREN` | 0xA8 (168) | 開き括弧 ("(") キー。 |
| `DOM_VK_CLOSE_PAREN` | 0xA9 (169) | 閉じ括弧 (")") キー。 |
| `DOM_VK_ASTERISK` | 0xAA (170) | アスタリスク ("\*") キー。 |
| `DOM_VK_PLUS` | 0xAB (171) | 正記号 ("+") キー。 |
| `DOM_VK_PIPE` | 0xAC (172) | パイプ ("|") キー。 |
| `DOM_VK_HYPHEN_MINUS` | 0xAD (173) | ハイフン/マイナス ("-") キー。 |
| `DOM_VK_OPEN_CURLY_BRACKET` | 0xAE (174) | 開き波括弧 ("{") キー。 |
| `DOM_VK_CLOSE_CURLY_BRACKET` | 0xAF (175) | 閉じ波括弧 ("}") キー。 |
| `DOM_VK_TILDE` | 0xB0 (176) | チルダ ("~") キー。 |
| `DOM_VK_VOLUME_MUTE` | 0xB5 (181) | 消音キー。 |
| `DOM_VK_VOLUME_DOWN` | 0xB6 (182) | 音量下げキー |
| `DOM_VK_VOLUME_UP` | 0xB7 (183) | 音量上げキー |
| `DOM_VK_COMMA` | 0xBC (188) | カンマ (",") キー。 |
| `DOM_VK_PERIOD` | 0xBE (190) | ピリオド (".") キー。 |
| `DOM_VK_SLASH` | 0xBF (191) | スラッシュ ("/") キー。 |
| `DOM_VK_BACK_QUOTE` | 0xC0 (192) | 逆引用符 ("`") キー。 |
| `DOM_VK_OPEN_BRACKET` | 0xDB (219) | 開き角括弧 ("[") キー。 |
| `DOM_VK_BACK_SLASH` | 0xDC (220) | バックスラッシュ ("\") キー。 |
| `DOM_VK_CLOSE_BRACKET` | 0xDD (221) | 閉じ角括弧 ("]") キー。 |
| `DOM_VK_QUOTE` | 0xDE (222) | 単一引用符 (''') キー。 |
| `DOM_VK_META` | 0xE0 (224) | Linux の Meta キー、 Mac の Command キー。 |
| `DOM_VK_ALTGR` | 0xE1 (225) | Linux の AltGr キー (Level 3 Shift キーまたは Level 5 Shift キー)。 |
| `DOM_VK_WIN_ICO_HELP` | 0xE3 (227) | Windows の OEM 固有キー。
 これは Olivetti ICO キーボードで使われています（いました？）
  |
| `DOM_VK_WIN_ICO_00` | 0xE4 (228) | Windows の OEM 固有キー。
 これは Olivetti ICO キーボードで使われています（いました？）
  |
| `DOM_VK_WIN_ICO_CLEAR` | 0xE6 (230) | Windows の OEM 固有キー。
 これは Olivetti ICO キーボードで使われています（いました？）
  |
| `DOM_VK_WIN_OEM_RESET` | 0xE9 (233) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_JUMP` | 0xEA (234) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_PA1` | 0xEB (235) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_PA2` | 0xEC (236) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_PA3` | 0xED (237) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_WSCTRL` | 0xEE (238) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_CUSEL` | 0xEF (239) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_ATTN` | 0xF0 (240) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_FINISH` | 0xF1 (241) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_COPY` | 0xF2 (242) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_AUTO` | 0xF3 (243) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_ENLW` | 0xF4 (244) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_WIN_OEM_BACKTAB` | 0xF5 (245) | Windows の OEM 固有キー。
 これは Nokia/Ericsson の端末で使用されていました。
  |
| `DOM_VK_ATTN` | 0xF6 (246) | IBM ミッドレンジコンピューター（AS/400 など）の Attn (Attention) キー。 |
| `DOM_VK_CRSEL` | 0xF7 (247) | IBM 3270 キーボードレイアウトの CrSel （カーソル選択）キー。 |
| `DOM_VK_EXSEL` | 0xF8 (248) | IBM 3270 キーボードレイアウトの ExSel （拡張選択）キー。 |
| `DOM_VK_EREOF` | 0xF9 (249) | IBM 3270 キーボードレイアウトの Erase EOF キー。 |
| `DOM_VK_PLAY` | 0xFA (250) | IBM 3270 キーボードレイアウトの Play キー。 |
| `DOM_VK_ZOOM` | 0xFB (251) | Zoom キー。 |
| `DOM_VK_PA1` | 0xFD (253) | IBM 3270 キーボードレイアウトの PA1 キー。 |
| `DOM_VK_WIN_OEM_CLEAR` | 0xFE (254) | クリアキーです。ただし、 `DOM_VK_CLEAR` との違いは分かりません。 |

### Windows の OEM 固有キー

Windows では、仮想キーコードのいくつかの値は、 OEM の特定のキー用に定義（予約）されています。これらは、非標準のキーボードの特殊なキーで利用可能です。言い換えれば、いくつかの値は、2 つ以上のベンダー（またはハードウェア）によって異なる意味で使用されています。

Gecko 21 （および 15 より古いバージョン）では、OEM 固有のキー値は Windows 上でのみ keyCode 属性で利用可能です。そのため、通常のウェブアプリケーションでは使用できません。それらはイントラネットのアプリケーション、または同様の状況においてのみ使用されます。

詳しくは MSDN の "Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)" を参照してください。


KeyboardEvent: charCode プロパティ - Web API

KeyboardEvent: charCode プロパティ
=============================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`charCode`** は `KeyboardEvent` インターフェイスの読み取り専用プロパティで、 `keypress` イベントの間に押されたキーの Unicode 値を返します。

**警告:** このプロパティは非推奨なので、使用しないでください。代わりに `key` プロパティを使用して、文字の Unicode 値を取得してください。

値
-

押された文字キーの Unicode 値を表す数値です。

例
-

### HTML

```html
<p>下の入力ボックスに何かを入力すると <code>charCode</code> を記録します。</p>
<input type="text" />
<p id="log"></p>
```

### JavaScript

```js
const input = document.querySelector("input");
const log = document.querySelector("#log");

input.addEventListener("keypress", (e) => {
  log.innerText = `Key pressed: ${String.fromCharCode(e.charCode)}\ncharCode: ${
 e.charCode
 }`;
});
```

### 結果

メモ
--

* `keypress` イベントでは、押されたキーの Unicode 値は `keyCode` または `charCode` プロパティのどちらかに格納されますが、両方格納されることはありません。押されたキーが文字（例えば 'a'）を生成する場合、 `charCode` にはその文字のコードが設定されます。 `charCode` は文字の大文字小文字を区別します（言い換えれば、 `charCode` は `shift` キーが押されていたかどうかを考慮します）。そうでない場合は、押されたキーのコードが `keyCode` に格納されます。
* 1 つ以上の修飾キーが押されたとき、 `charCode` にはいくつかの複雑なルールがあります。詳しくは Gecko Keypress Event を参照してください。
* `charCode` は `keydown` と `keyup` イベントで設定されることはありません。これらのケースでは、代わりに `keyCode` が設定されます。
* `keyCode` と `charCode` のどちらに格納されていたとしても、キーのコードを取得するには、`which` プロパティを参照してください。
* IME から入力された文字は `keyCode` や `charCode` を通して登録されません。
* 特定のキーに関連付けられた `charCode` 値のリストについては、例 7: イベントオブジェクトのプロパティを表示するを実行して、結果の HTML の表を表示してみてください。
仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-charcode |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


KeyboardEvent: key プロパティ - Web API

KeyboardEvent: key プロパティ
========================

`KeyboardEvent` インターフェイスの **`key`** プロパティは読み取り専用で、ユーザーが押したキーの値を、 `Shift` キーなどの修飾キーやキーボードのロケールやレイアウトを考慮した値で返します。

値
-

文字列です。

この値は、以下のように決定されます。

* 押されたキーが表示可能なものである場合、返される値は、そのキーの表示可能な表現を含む空でない Unicode 文字列になります。
* 押されたキーが制御文字や特殊文字の場合、返される値は事前に定義されたキー値のいずれかになります。
* もし `KeyboardEvent` がデッドキーが押されたことを表している場合は、キー値は "`Dead`" になります。
* 一部の特殊なキーボードのキー（マルチメディアキーボードでメディアを制御するための拡張キーなど）は、 Windows ではキーコードを生成しません。その代わりに、 `WM_APPCOMMAND` イベントが発生します。これらのイベントは DOM キーボードイベントにマッピングされ、 Windows の「仮想キーコード」にリストアップされます（実際にはキーコードではありませんが）。
* キーを特定できない場合、返される値は `Unidentified` になります。

キー値の完全なリストをご覧ください。

KeyboardEvent の順序
-----------------

それぞれの `KeyboardEvent` はあらかじめ定められた順序で発生します。キーが押された場合、発生する一連の `KeyboardEvent` は `Event.preventDefault` が呼び出されないと仮定すれば次のようになります。

1. 最初に `keydown` イベントが発生します。キーがそれ以上押され続けてそのキーが文字を入力する場合は、イベントはプラットフォームの実装に依存した間隔で発生し続け、読み取り専用の `KeyboardEvent.repeat` プロパティが `true` に設定されます。
2. もしキー入力が `<input>`、`<textarea>`もしくは`HTMLElement.contentEditable` が `true` の要素に文字を挿入する場合は、 `beforeinput` と `input` イベント型がその順番で発生します。一部の他の実装では、 `keypress` イベントを実装していれば発生する可能性があることに注意してください。イベントはキーが押されている間、連続で発生します。
3. キーを離した際に `keyup` イベントが発生します。これで一連の処理は終わりです。

1 と 3 の処理で、 `KeyboardEvent.key` 属性が定義され、先ほど定義したルールに則って値が設定されます。

一連の KeyboardEvent の例
--------------------

米国キーボードレイアウトで `Shift` キーと `2` キーを使用した場合と、英国キーボードレイアウトで使用した場合のイベントシーケンスについて考えてみましょう。

以下の 2 つのテストケースを使用して実験してみてください。

1. `Shift` キーを押しながら、 `2` キーを押して離します。次に `Shift` キーを離します。
2. `Shift` キーを押しながら、 `2` を押し続けます。 `Shift` キーを離します。最後に `2` を離します。
### HTML

```html
<div class="fx">
  <div>
    <textarea rows="5" name="test-target" id="test-target"></textarea>
    <button type="button" name="btn-reset" id="btn-reset">Reset</button>
  </div>
  <div class="flex">
    <pre id="console-log"></pre>
  </div>
</div>
```

### CSS

```css
.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;
}
```

### JavaScript

```js
let textarea = document.getElementById("test-target"),
  consoleLog = document.getElementById("console-log"),
  btnReset = document.getElementById("btn-reset");

function logMessage(message) {
  consoleLog.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]`);
});

btnReset.addEventListener("click", (e) => {
  let child = consoleLog.firstChild;
  while (child) {
    consoleLog.removeChild(child);
    child = consoleLog.firstChild;
  }
  textarea.value = "";
});
```

### 結果

**メモ:** `beforeinput` と `input` イベントで使用されている `InputEvent` インターフェイスを完全に実装していないブラウザーでは、誤ったログ出力をする可能性があります。

### ケース 1

Shift キーが押されると、まず `keydown` イベントが発行され、 `key` プロパティの値として文字列 `Shift` が設定されます。このキーを押し続けても、文字が発生しないので `keydown` イベントが繰り返し発行され続けるわけではありません。

`2 キー`が押されると、この新しいキー押下に対して別の `keydown` イベントが発行され、修飾キー `shift` が有効なので、このイベントの `key` プロパティ値には米国のキーボード型の場合は `@` 、英国のキーボード型の場合は `"` という文字列が設定されます。文字キーが生成されたので、次に `beforeinput` と `input` イベントが発行されます。

`2 キー`を離すと、`keyup` イベントが発行され、`key` プロパティにはそれぞれ異なるキーボードレイアウト用の `@` と `"` という文字列が保持されるようになります。

最後に `shift` キーを離すと、別の `keyup` イベントが発行され、 key 属性の値は `Shift` のまま残ります。

### ケース 2

Shift キーが押されると、まず `keydown` イベントが発行され、`key` プロパティの値として文字列 `Shift` がセットされます。このキーを押し続けても、文字キーは生成されないので、 keydown イベントは繰り返し発行され続けることはありません。

`2 キー`が押されると、この新しいキー押下に対して別の `keydown` イベントが発行され、修飾キー `shift` が有効になっているので、そのイベントの `key` プロパティの値は、米国キーボード型の場合は `@` 、英国キーボード型の場合は `"` という文字列に設定されています。文字が生成されたので、次に `beforeinput` と `input` イベントが発行されています。キーを押し続けると、`keydown` イベントが繰り返し発行され、`KeyboardEvent.repeat`プロパティは `true` にセットされています。同様に `beforeinput` と `input` イベントが繰り返し発行されています。

`Shift` キーを離すと、それに対して `keyup` イベントが発行され、キー属性の値は `Shift` のままとなります。このとき、修飾キー `shift` は有効ではなくなるので、`2 キー`を押したときの keydown イベントを繰り返すための `key` プロパティの値が "2" になっていることに注目してください。同じことが `beforeinput` と `input` イベントの `InputEvent.data` プロパティにも当てはまります。

最後に `2 キー`を離すと、`keyup` イベントが発行されますが、修飾キー `shift` はもはやアクティブではないので、`key` プロパティはどちらのキーボードレイアウトでも、文字列値 `2` に設定されます。

例
-

この例では `EventTarget.addEventListener()` を使用して `keydown` イベントを待ち受けています。イベントが発生すると、キーの値がチェックされ、コードが関心を持つキーの一つであるかどうかが確認され、もしそうであれば、何らかの方法で処理されます（宇宙船の操縦や、スプレッドシートの選択セルの変更など）。

```js
window.addEventListener(
  "keydown",
  (event) => {
    if (event.defaultPrevented) {
      return; // Do nothing if the event was already processed
    }

    switch (event.key) {
      case "ArrowDown":
        // Do something for "down arrow" key press.
        break;
      case "ArrowUp":
        // Do something for "up arrow" key press.
        break;
      case "ArrowLeft":
        // Do something for "left arrow" key press.
        break;
      case "ArrowRight":
        // Do something for "right arrow" key press.
        break;
      case "Enter":
        // Do something for "enter" or "return" key press.
        break;
      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,
);
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-key |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


KeyboardEvent: initKeyboardEvent() メソッド - Web API

KeyboardEvent: initKeyboardEvent() メソッド
=======================================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`KeyboardEvent.initKeyboardEvent()`** メソッドは、キーボードイベントオブジェクトの属性を初期化します。このメソッドは DOM Level 3 Events の草案で導入されましたが、より新しい草案では非推奨とされています。Gecko はこの機能に対応していません。このメソッドを実験的に実装すると、既存のウェブアプリが壊れてしまうからです（Firefox バグ 999645 を参照してください）。
 ウェブアプリケーションは、もしコンストラクターが使用できるのであれば、代わりに使用する必要があります。

構文
--

```js
initKeyboardEvent(type, canBubble, cancelable,
                  view, key, location, ctrlKey,
                  altKey, shiftKey, metaKey)
```

### 引数

`type`

キーボードイベントの型。ブラウザーは常に `keydown`, `keypress`, `keyup` のいずれかを設定します。

`canBubble` 省略可

イベントがバブリングするかどうかを示す。既定値は `false` です。

`cancelable` 省略可

イベントをキャンセルできるかどうかを示します。既定値は `false` です。

`view` 省略可

関連付けられている WindowProxy を指定します。既定値は `null` です。

`key` 省略可

key 属性の値。既定値は `""` です。

`location` 省略可

location 属性の値。既定値は `0` です。

`ctrlKey` 省略可

コントロールキーの修飾が有効であるかどうかを示します。既定値は `false` です。

`altKey` 省略可

Alt キーの修飾が有効かどうかを示します。既定値は `false` です。

`shiftKey` 省略可

Shift キーの修飾が有効であるかどうかを示します。既定値は `false` です。

`metaKey` 省略可

メタキーの修飾が有効であるかどうかを示します。既定値は `false` です。

### 返値

なし (`undefined`)。

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-initkeyboardevent |

`KeyboardEvent` インターフェイス仕様は多くの草稿を経ており、最初の DOM Events Level 2 では合意が得られなかったため削除され、次の DOM Events Level 3 で採用されました。このため、標準外の初期化メソッドが、初期の DOM Events Level 2 バージョンの `KeyboardEvent.initKeyEvent()` が Gecko ブラウザーに、初期の DOM Events Level 3 バージョンの `KeyboardEvent.initKeyboardEvent()` がその他のブラウザーに実装されました。両方とも、コンストラクター `KeyboardEvent()` の現代的な用法に置き換えられました。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


KeyboardEvent: metaKey プロパティ - Web API

KeyboardEvent: metaKey プロパティ
============================

**`KeyboardEvent.metaKey`** は読み取り専用のプロパティで、 プロパティは、イベントが発生したときに `Meta` キーが押されていたか (`true`) あるいは押されていなかった (`false`) かを示す論理値を返します。オペレーティングシステムによっては、キーが検出されないように遮蔽されることがあります。

**メモ:** Macintosh のキーボードでは、これは `⌘ Command` キーです。

**警告:** 少なくとも Firefox 48 の時点で、 `⊞ Windows` キーは "Meta" キーとみなされなくなりました。`⊞ Windows` キーが押されたとき `KeyboardEvent.metaKey` は `false` になります。

値
-

論理値です。

例
-

```html
<button onclick="ismetaKey(event)">Click me with the meta key</button>

<p id="output"></p>
```

```js
function ismetaKey(e) {
  document.querySelector("#output").textContent =
    `metaKey pressed? ${e.metaKey}`;
}
```

#### 結果

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-metakey |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `KeyboardEvent`


KeyboardEvent: getModifierState() メソッド - Web API

KeyboardEvent: getModifierState() メソッド
======================================

**`KeyboardEvent.getModifierState()`** メソッドは、指定された修飾キーの現在の状態を返します。修飾キーが有効な場合（すなわち修飾キーが押されているかロックされている場合）は `true`、そうでなければ `false` になります。

構文
--

```js
getModifierState(key)
```

### 引数

`key`

修飾キーの値。値は修飾キーを表す `KeyboardEvent.key` 値のいずれか、または文字列 `"Accel"`
非推奨
 でなければなりません。これは大文字と小文字を区別します。

### 返値

論理値です。

Firefox での修飾キー
--------------

Firefox で `getModifierState()` が true を返すときです。

|  | Windows | Linux (GTK) | Mac | Android 2.3 | Android 3.0 or later |
| --- | --- | --- | --- | --- | --- |
| `"Alt"` | `Alt` キーか `AltGr` キーが押されている | `Alt` キーが押されている | `⌥ Option` キーが押されている | `Alt` キーか `option` キーが押されている |
| `"AltGraph"` | `Alt` と `Ctrl` の両方のキーが押されている、または `AltGr` キーが押されている | `Level 3 Shift` キー（または `Level 5 Shift` キー）が押されている | `⌥ Option` キーが押されている | ❌ *未対応* | ❌ *未対応* |
| `"CapsLock"` | `⇪ Caps Lock` の LED がオンになっている間 | ❌ *未対応* | `CapsLock` がロックされている間 |
| `"Control"` | `Ctrl` キーか `AltGr` キーが押されている | `Ctrl` キーが押されている | `control` キーが押されている | `menu` キーが押されている | `Ctrl` キー、 `control` キー、 `menu` キーの何れかが押されている |
| `"Fn"` | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | `Function` キーが押されているが、どのキーが修飾状態をアクティブにするのかが分からない。 Mac のキーボードの `Fn` キーでは、このアクティブな状態は発生しません。 |
| `"FnLock"` | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* |
| `"Hyper"` | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* |
| `"Meta"` | `⊞ Windows ロゴ` キーが押されている（Firefox 118 以降） | `Meta` キーが押されている | `⌘ Command` キーが押されている | ❌ *未対応* | `⊞ Windows ロゴ` キーまたは `command` キーが押されている |
| `"NumLock"` | `Num Lock` の LED がオンになっている間 | A key on numpad pressed | ❌ *未対応* | `NumLock` がロックされている間 |
| `"OS"` | `⊞ Windows ロゴ` キーが押されている（Firefox 118 より前） | `Super` キーまたは `Hyper` キーが押されている（ふつう、 `⊞ Windows ロゴ` キーに割り当てられている） | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* |
| `"ScrollLock"` | `Scroll Lock` の LED がオンになっている間 | `Scroll Lock` の LED がオンになっている間、ただしふつうはプラットフォームが対応していない | ❌ *未対応* | ❌ *未対応* | `ScrollLock` がロックされている間 |
| `"Shift"` | `⇧ Shift` キーが押されている |
| `"Super"` | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* |
| `"Symbol"` | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* |
| `"SymbolLock"` | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* | ❌ *未対応* |

* その他のプラットフォームでは、 "Alt", "Control", "Shift" に対応している場合があります。
* すべての修飾キー（Firefox が実装した後に定義された `"FnLock"`、`"Hyper"`、`"Super"`、`"Symbol"` を除く）は、 Firefox は信頼されないイベントに対して常に対応します。
 これはプラットフォームに依存しません。
`"Accel"` 仮想修飾子
---------------

**メモ:** `"Accel"` 仮想修飾子は、 DOM3 Events 仕様の現在のドラフトでは、事実上**非推奨**とされています。

`getModifierState()` は `"Accel"` という名前の非推奨の仮想修飾子も受け入れます。`event.getModifierState("Accel")` は `KeyboardEvent.ctrlKey` または `KeyboardEvent.metaKey` の少なくともどちらかが `true` である場合に `true` を返します。

 古い実装や古い仕様では、ショートカットキーの代表的な修飾キーで修飾されていたときに `true` を返していました。例えば、 Windows では、 `Ctrl` キーを押すと、`true`を返すことがあります。
 しかし、 Mac では、 `⌘ Command` キーを押すと、 `true` を返すかもしれません。
 どの修飾キーで true を返すかは、プラットフォーム、ブラウザー、ユーザーの設定に依存することに注意してください。例えば、 Firefox の場合、 `"ui.key.accelKey"` という設定項目でカスタマイズすることができます。

例
-

```js
function handleKeyboardEvent(event) {
  // Ignore if following modifier is active.
  if (
    event.getModifierState("Fn") ||
    event.getModifierState("Hyper") ||
    event.getModifierState("OS") ||
    event.getModifierState("Super") ||
    event.getModifierState("Win") /\* hack for IE \*/
  ) {
    return;
  }

  // Also ignore if two or more modifiers except Shift are active.
  if (
    event.getModifierState("Control") +
      event.getModifierState("Alt") +
      event.getModifierState("Meta") >
    1
  ) {
    return;
  }

  // Handle shortcut key with standard modifier
  if (event.getModifierState("Accel")) {
    switch (event.key.toLowerCase()) {
      case "c":
        if (event.getModifierState("Shift")) {
          // Handle Accel + Shift + C
          event.preventDefault(); // consume the key event
        }
        break;
      case "k":
        if (!event.getModifierState("Shift")) {
          // Handle Accel + K
          event.preventDefault(); // consume the key event
        }
        break;
    }
    return;
  }

  // Do something different for arrow keys if ScrollLock is locked.
  if (
    (event.getModifierState("ScrollLock") ||
      event.getModifierState("Scroll")) /\* hack for IE \*/ &&
    !event.getModifierState("Control") &&
    !event.getModifierState("Alt") &&
    !event.getModifierState("Meta")
  ) {
    switch (event.key) {
      case "ArrowDown":
      case "Down": // hack for IE and old Firefox
        event.preventDefault(); // consume the key event
        break;
      case "ArrowLeft":
      case "Left": // hack for IE and old Firefox
        // Do something different if ScrollLock is locked.
        event.preventDefault(); // consume the key event
        break;
      case "ArrowRight":
      case "Right": // hack for IE and old Firefox
        // Do something different if ScrollLock is locked.
        event.preventDefault(); // consume the key event
        break;
      case "ArrowUp":
      case "Up": // hack for IE and old Firefox
        // Do something different if ScrollLock is locked.
        event.preventDefault(); // consume the key event
        break;
    }
  }
}
```

**メモ:** この例は `.getModifierState()` を `"Alt"`,
 `"Control"`, `"Meta"`, `"Shift"` で使用していますが、
 `event.altKey`, `event.ctrlKey`, `event.metaKey`,
 `event.shiftKey` の方がよりお勧めです。

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-getmodifierstate |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* このメソッドの所属先の `KeyboardEvent`
* `MouseEvent.getModifierState`


KeyboardEvent: location プロパティ - Web API

KeyboardEvent: location プロパティ
=============================

**`KeyboardEvent.location`** は読み取り専用のプロパティで、キーボードやその他の入力機器上のキーの位置を表す `unsigned long` を返します。

取りうる値は以下の通りです。

| 定数 | 値 | 説明 |
| --- | --- | --- |
| `DOM_KEY_LOCATION_STANDARD` | 0 | このキーは 1 つしかない、または左右の区別がつかないもので、テンキーやキーパッドの一部とみなされるキーで押されたものではありません。 |
| `DOM_KEY_LOCATION_LEFT` | 1 | このキーは、左側のキーです。例えば、標準的な 101 キーの US キーボードでは、左側の `Control` キーが押されたことになります。この値は、キーボード上に 2 つ以上の位置にある可能性があるキーにのみ使用されます。 |
| `DOM_KEY_LOCATION_RIGHT` | 2 | このキーは、右側のキーです。例えば、標準的な 101 キーの US キーボードでは、右側の `Control` キーが押されたことになります。この値は、キーボード上に 2 つ以上の位置にある可能性があるキーにのみ使用されます。 |
| `DOM_KEY_LOCATION_NUMPAD` | 3 | キーがテンキーにあるか、テンキーに対応する仮想キーコードを持っています。

**メモ:** `NumLock` がロックされているとき、 Firfox はテンキーのキーに対して常に `DOM_KEY_LOCATION_NUMPAD` を返します。一方、`NumLock` がロックされていない場合、キーボードに実際にテンキーがある場合にも、 Firefox は常に `DOM_KEY_LOCATION_NUMPAD` を返します。一方、ノートパソコンのようにキーボードにテンキーがない場合、 NumLock がロックされたときだけテンキーとなるキーがあります。このようなキーがキーイベントを発行する場合、 location 属性の値はキーに依存します。つまり、 `DOM_KEY_LOCATION_NUMPAD` になることはありません。

**メモ:** `NumLock` キーのキーイベントは、 Firefox と Internet Explorer の両方で `DOM_KEY_LOCATION_STANDARD` となります。
 |
| `DOM_KEY_LOCATION_MOBILE`

Non-standard

非推奨
 | 4 | キーはモバイル機器にあります。これは物理的なキーパッドでも仮想キーボードでもかまいません。 |
| `DOM_KEY_LOCATION_JOYSTICK`
Non-standard

非推奨
 | 5 | このキーは、ゲーム機のコントローラーのボタンやモバイル機器のジョイスティックです。 |

値
-

数値です。

例
-

```js
function keyEvent(event) {
  console.log(`押されたキーの位置: ${event.location}`);
}
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-location |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `KeyboardEvent`


KeyboardEvent: ctrlKey プロパティ - Web API

KeyboardEvent: ctrlKey プロパティ
============================

**`KeyboardEvent.ctrlKey`** は読み取り専用のプロパティで、このイベントが発生したときに `control` キーが押されていた (`true`) または押されていなかった (`false`) ことを表す論理値を返します。

値
-

論理値です。

例
-

```js
<html lang="ja">
  <head>
    <title>ctrlKey の例</title>
    <script>
      function showChar(e) {
        alert(`Key Pressed: ${e.key}\nCTRL key pressed: ${e.ctrlKey}\n`);
      }
    </script>
  </head>
  <body onkeypress="showChar(event);">
    <p>
      CTRL キーを押したまま、または押さずに、任意の文字キーを押してください。<br />
      また、 SHIFT キーと CTRL キーを同時に使用することもできます。
    </p>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-ctrlkey |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `KeyboardEvent`


KeyboardEvent: initKeyEvent() メソッド - Web API

KeyboardEvent: initKeyEvent() メソッド
==================================

**警告:** このメソッドを使わないでください。代わりに `KeyboardEvent()` コンストラクターを使用してください。

 このメソッドは DOM 仕様から削除され、現在のどのブラウザーも対応していません。
 Firefox はバージョン 93 からこのメソッドを環境設定 (`dom.keyboardevent.init_key_event.enabled`) に隠蔽しており、その後まもなく削除される予定になっています。

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`KeyboardEvent.initKeyEvent()`** メソッドは `document.createEvent` `("KeyboardEvent")` を使用して作成されたイベントの値を初期化するために使用されます。この方法で初期化されるイベントは `document.createEvent` `("KeyboardEvent")` メソッドで作成しておく必要があります。 `initKeyEvent()` はイベントが配信される前に呼び出して設定する必要があります。

構文
--

```js
initKeyEvent (type, bubbles, cancelable, view,
                    ctrlKey, altKey, shiftKey, metaKey,
                    keyCode, charCode)
```

### 引数

`type`

文字列で、イベントの種類を表します。

`bubbles`

論理値で、このイベントがイベントチェーンを通してバブリングするかどうかを示します（バブリングを参照）。

`cancelable`

論理値です。イベントがキャンセル可能かどうかを示します（キャンセル可能を参照）。

`view`

`UIEvent.view` を指定します。この値は `null` にすることができます。

`ctrlKey`

論理値です。 `true` ならば仮想キーが `Ctrl` キーとの組み合わせで生成されたことを示します。

`altKey`

論理値です。 `true` ならば仮想キーが `Alt` キーとの組み合わせで生成されたことを示します。

`shiftKey`

論理値です。 `true` ならば仮想キーが `Shift` キーとの組み合わせで生成されたことを示します。

`metaKey`

論理値です。 `true` ならば仮想キーが `Meta` キーとの組み合わせで生成されたことを示します。

`keyCode`

押されたキーの仮想キーコード値を表す `unsigned long` で、それ以外は `0` になります。キーコードの一覧は `KeyboardEvent.keyCode` を参照してください。

`charCode`

押されたキーに対応する Unicode 文字を表す `unsigned long` で、それ以外の場合は `0` です。

### 返値

なし (`undefined`)。

例
-

```js
const event = document.createEvent("KeyboardEvent"); // create a key event
// define the event
event.initKeyEvent(
  "keypress", // typeArg,
  true, // canBubbleArg,
  true, // cancelableArg,
  null, // viewArg, Specifies UIEvent.view. This value may be null.
  false, // ctrlKeyArg,
  false, // altKeyArg,
  false, // shiftKeyArg,
  false, // metaKeyArg,
  9, // keyCodeArg,
  0,
); // charCodeArg);

document.getElementById("blah").dispatchEvent(event);
```

仕様書
---

このキーボードイベントの実装は、 DOM 2 Events の初期版のキーイベント仕様に基づいています。後にこの仕様書から削除され、代わりに `KeyboardEvent()` を使用するべきとされています。


KeyboardEvent: altKey プロパティ - Web API

KeyboardEvent: altKey プロパティ
===========================

**`KeyboardEvent.altKey`** は読み取り専用のプロパティで、イベント発生時に `alt` キー（macOS では `Option` または `⌥`）が押されたか (`true`) または押されていないか (`false`) を示す論理値です。

値
-

論理値です。

例
-

```html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>altKey の例</title>

    <script>
 function showChar(e) {
 alert(
 "Key KeyDown: " +
 String.fromCharCode(e.charCode) +
 "\n" +
 "charCode: " +
 e.charCode +
 "\n" +
 "ALT key KeyDown: " +
 e.altKey +
 "\n",
 );
 }
 </script>
  </head>

  <body onkeydown="showChar(event);">
    <p>
      ALT キーを押したまま、または押さずに、任意の文字キーを押してください。<br />
      また、 SHIFT キーと ALT キーを同時に使用することもできます。
    </p>
  </body>
</html>
```

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-altkey |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `KeyboardEvent`


KeyboardEvent: repeat プロパティ - Web API

KeyboardEvent: repeat プロパティ
===========================

**`repeat`** は `KeyboardEvent` インターフェイスの読み取り専用プロパティで、 このキーが押しっぱなしになって自動反復している場合、 `true` の論理値を返します。

値
-

論理値です。

仕様書
---

| Specification |
| --- |
| UI Events # dom-keyboardevent-repeat |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


KeyboardEvent: keyIdentifier プロパティ - Web API

KeyboardEvent: keyIdentifier プロパティ
==================================

**非標準:** この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

非推奨の **`KeyboardEvent.keyIdentifier`** は読み取り専用のプロパティで、どのキーが押されたかを特定することができる「キー識別子」文字列を返します。非推奨でない置き替え先は `KeyboardEvent.key` です。

仕様書
---

*現在の仕様書には含まれていません。* このプロパティは DOM Level 3 Events 仕様書の古い草稿に含まれていましたが、後の草稿で取り除かれ、 `KeyboardEvent.key` に置き換えられました。

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


XPathException: code プロパティ - Web API

XPathException: code プロパティ
==========================

**非推奨:** この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

**`code`** は `XPathException` インターフェイスの読み取り専用プロパティで、いずれかのエラーコード定数を表す `short` を返します。

値
-

エラーコードを表す `short` 数です。

仕様書
---

#### No specification found

No specification data found for `api.XPathException.code`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Serial.requestPort() - Web API

Serial.requestPort()
====================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`Serial` インターフェイスの **`Serial.requestPort()`** メソッドは、ユーザーが選んだデバイスを表す `SerialPort` のインスタンスで解決するか、デバイスが選択されなかった場合は拒否される `Promise` を返します。

構文
--

```js
requestPort()
requestPort(options)
```

### 引数

`options`

以下のプロパティを持つオブジェクトです。

`filters`

接続されたデバイスの探索に使用するベンダー ID とプロダクト ID を格納したオブジェクトのリストです。USB Implementors Forum が特定の会社に ID を割り当てます。それぞれの会社がその製品に ID を割り当てます。フィルターは以下の値を含みます。

`usbVendorId`

USB デバイスの製造元を特定する `unsigned short` の整数です。

`usbProductId`

USB デバイスを特定する `unsigned short` の整数です。

### 返値

`SerialPort` のインスタンスで解決する `Promise` を返します。

### 例外

`SecurityError` `DOMException`

Feature Policy でこの API の使用が制限されていたり、ユーザーの操作によって API の使用が許可されていないとき、返された `Promise` がこのエラーで拒否されます。

`AbortError` `DOMException`

ユーザーが要求に応じてポートを選択しなかったとき、返された `Promise` がこのエラーで拒否されます。

例
-

この例では、`requestPort()` に USB ベンダー ID を入れたフィルターを渡し、ユーザーに提示するデバイスのリストを特定の製造元によって作られた USB デバイスのみに絞り込んでいます。フィルターが省略された場合、ユーザーは利用可能なすべてのポートから選択できます。

```js
button.addEventListener("click", () => {
  const usbVendorId = 0xabcd;
  navigator.serial
    .requestPort({ filters: [{ usbVendorId }] })
    .then((port) => {
      // `port` に接続する、すなわち利用可能なポートのリストに加えます。
    })
    .catch((e) => {
      // ユーザーがポートを選択しませんでした。
    });
});
```

仕様書
---

| Specification |
| --- |
| Web Serial API # dom-serial-requestport |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


Serial.getPorts() - Web API

Serial.getPorts()
=================

**安全なコンテキスト用:** この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

**Experimental:** **これは実験的な機能です。**
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

`Serial` インターフェイスの **`getPorts()`** メソッドは、接続されており、かつオリジンにアクセス許可があるシリアルポートを表す `SerialPort` の配列で解決する `Promise` を返します。

構文
--

```js
getPorts()
```

### 引数

なし。

### 返値

`SerialPort` オブジェクトの配列で解決する `Promise` を返します。

### 例外

`SecurityError` `DOMException`

Feature Policy でこの API の使用が制限されていたり、ユーザーの操作によって API の使用が許可されていないとき、返された `Promise` がこのエラーで拒否されます。

例
-

この例では、`getPorts()` を用いて利用可能なポートのリストを初期化します。

```js
navigator.serial.getPorts().then((ports) => {
  // ページの読み込み時、`ports` を用いて利用可能なポートのリストを初期化します。
});
```

仕様書
---

| Specification |
| --- |
| Web Serial API # dom-serial-getports |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


IDBRequest.transaction - Web API

IDBRequest.transaction
======================

`IDBRequest` インターフェイスの読み取り専用プロパティ **`transaction`** は、要求のトランザクション、すなわちこの要求がその中で生成されたトランザクションを返します。

このプロパティは、`IDBFactory.open` が返した要求 (データベースに接続するだけなので、返すべきトランザクションが存在しない) など、トランザクション内で生成されていない要求では `null` になり得ます。データベースを開くときにバージョンの更新が必要な場合は、`upgradeneeded` イベントハンドラーの実行中、**`transaction`** プロパティは `mode` が `"versionchange"` と等しい `IDBTransaction` となり、既存のオブジェクトストアやインデックスにアクセスしたり、更新を中止したりするのに使用できます。更新の後は、**`transaction`** プロパティは再び `null` になるでしょう。

**注:** この機能は Web Worker 内で利用可能です

値
-

`IDBTransaction` です。

例
-

以下の例では、指定のタイトルのレコードを要求し、`onsuccess` で `IDBObjectStore` から (`objectStoreTitleRequest.result` として参照できるようになった) 対応するレコードを取得し、レコードのプロパティ 1 個を更新し、更新したレコードを別の要求でオブジェクトストアに書き戻します。要求元を開発者コンソールに記録します。両方とも同じトランザクションに由来しています。動く例全体は、To-do Notifications アプリケーションを参照してください。(動く例を見る)

```js
const title = "Walk dog";

// 通常通りトランザクションを開始します
const objectStore = db
  .transaction(["toDoList"], "readwrite")
  .objectStore("toDoList");

// 指定の title をタイトルとして持つ TO-DO リストのオブジェクトを取得します
const objectStoreTitleRequest = objectStore.get(title);

objectStoreTitleRequest.onsuccess = () => {
  // result として返されたデータオブジェクトを取得します
  const data = objectStoreTitleRequest.result;

  // オブジェクトの notified の値を "yes" に更新します
  data.notified = "yes";

  // アイテムをデータベースに書き戻す別の要求を生成します
  const updateTitleRequest = objectStore.put(data);

  // この要求が由来するトランザクションを記録します
  console.log(
    `この要求が由来するトランザクションは ${updateTitleRequest.transaction} です`,
  );

  // 新しい要求が成功したら、また displayData() 関数を
  // 実行し、表示を更新します
  updateTitleRequest.onsuccess = () => {
    displayData();
  };
};
```

この例では、**`transaction`** プロパティをバージョンの更新中に既存のオブジェクトストアへアクセスするのに使う方法を示します。

```js
const openRequest = indexedDB.open("db", 2);
console.log(openRequest.transaction); // "null" が記録されるはずです

openRequest.onupgradeneeded = (event) => {
  console.log(openRequest.transaction.mode); // "versionchange" が記録されるはずです
  const db = openRequest.result;
  if (event.oldVersion < 1) {
    // 新規データベースなので、オブジェクトストア "books" を作成します。
    db.createObjectStore("books");
  }
  if (event.oldVersion < 2) {
    // v1 データベースからの更新です。オブジェクトストア "books" の "title" にインデックスを追加します。
    const bookStore = openRequest.transaction.objectStore("books");
    bookStore.createIndex("by\_title", "title");
  }
};

openRequest.onsuccess = () => {
  console.log(openRequest.transaction); // "null" が記録されるはずです
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbrequest-transaction① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)


IDBRequest.result - Web API

IDBRequest.result
=================

`IDBRequest` インターフェイスの読み取り専用プロパティ **`result`** は、要求の結果を返します。要求が完了していない場合、結果は参照できず、`InvalidStateError` 例外が投げられます。

**注:** この機能は Web Worker 内で利用可能です

値
-

任意

例
-

この例では、タイトルを指定してレコードを要求し、`onsuccess` で `IDBObjectStore` から (`objectStoreTitleRequest.result` として参照できるようになった) 対応するレコードを取得し、レコードのプロパティ 1 個を更新し、更新したレコードをオブジェクトストアに書き戻します。動く例全体は、To-do Notifications を参照してください。(動く例を見る)

```js
const title = "Walk dog";

// 通常通りトランザクションを開始します
const objectStore = db
  .transaction(["toDoList"], "readwrite")
  .objectStore("toDoList");

// この title をタイトルとして持つ TO-DO リストのオブジェクトを取得します
const objectStoreTitleRequest = objectStore.get(title);

objectStoreTitleRequest.onsuccess = () => {
  // result として返されたデータオブジェクトを取得します
  const data = objectStoreTitleRequest.result;

  // オブジェクトの notified の値を "yes" に更新します
  data.notified = "yes";

  // アイテムをデータベースに書き戻す別のリクエストを生成します
  const updateTitleRequest = objectStore.put(data);

  // 新しいリクエストが成功したら、また displayData() 関数を
  // 実行し、表示を更新します
  updateTitleRequest.onsuccess = () => {
    displayData();
  };
};
```

仕様書
---

| Specification |
| --- |
| Indexed Database API 3.0 # ref-for-dom-idbrequest-result① |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* IndexedDB の使用
* トランザクションの開始: `IDBDatabase`
* トランザクションの使用: `IDBTransaction`
* キーの範囲の設定: `IDBKeyRange`
* データの取得と変更: `IDBObjectStore`
* カーソルの使用: `IDBCursor`
* リファレンス例: To-do Notifications (動く例を見る)