recursal/MDN huggingface dataset:
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 プロパティ
=================================

**`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() メソッド
=======================================

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 プロパティ
===============================

**`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() メソッド
===========================================

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 プロパティ
===============================

**`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 プロパティ
=============================

**`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 プロパティ
=============================

**`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 プロパティ
=============================

**`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 プロパティ
=============================

**`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 プロパティ
=====================================

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 プロパティ
=================================

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 プロパティ
======================================

**`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 プロパティ
==============================

**`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 プロパティ
==========================================

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 プロパティ
========================================

**`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() コンストラクター
=======================================

**`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: 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 プロパティ
================================

**`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: 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: 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 プロパティ
============================

**`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: 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 プロパティ
============================

**`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() メソッド
==================================

**警告:** このメソッドを使わないでください。代わりに `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 プロパティ
===========================

**`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`