Element: keydown イベント
=====================

**`keydown`** イベントは、キーが押されたときに発生します。

非推奨の `keypress` イベントとは異なり、 `keydown` イベントは生成する文字値に関係なくすべてのキーで発生します。

`keydown` と `keyup` イベントは、どのキーが押されたかを示すコードを提供し、 `keypress` はどの文字が入力されたかを示します。例えば、小文字の "a" は `keydown` と `keyup` では 65 と報告され、 `keypress` では 97 と報告されます。大文字の "A" は、どのイベントでも 65 と報告されます。

キーボードイベントは `<input>`, `<textarea>`, `<summary>` と `contentEditable` または `tabindex` 属性を持つものだけが生成します。捕捉されなかった場合、それらは `Document` に到達するまで DOM ツリーをバブリングします。

Firefox 65 以降では、CJKT ユーザーのブラウザー間の互換性を高めるために、 `keydown` および `keyup` イベントが IME 変換中に発行されるようになりました（Firefox バグ 354358）。変換操作中の `keydown` イベントをすべて無視するには、次のようにしてください （229 は、IME によって処理されたイベントに関連する `keyCode` に設定される特別な値です）。


```js
eventTarget.addEventListener("keydown", (event) => {
  if (event.isComposing || event.keyCode === 229) {
    return;
  }
  // 何かを行う
});
```

構文
--

イベント名を `addEventListener()` などのメソッドで使用したり、イベントハンドラープロパティを設定したりします。


```js
addEventListener("keydown", (event) => {});

onkeydown = (event) => {};
```

イベント型
-----

`KeyboardEvent` です。 `Event` から継承しています。

Event

UIEvent

KeyboardEventイベントプロパティ
---------

*このインターフェイスには親である `UIEvent` や `Event` から継承したプロパティもあります。*

`KeyboardEvent.altKey` 読取専用 

論理値で、このキーイベントが発生した際に `Alt` （macOS の場合は `Option` または `⌥`）キーが押されていれば `true` を返します。

`KeyboardEvent.code` 読取専用 

文字列で、このイベントが表す物理キーのコード値を返します。

**警告:** これはユーザーのキーボードレイアウトを無視します。つまり、ユーザーが QWERTY キーボードレイアウトの "Y" の位置（ホーム行の上の行の中央付近）でキーを押した場合、ユーザーが QWERTZ キーボード（これはユーザーが "Z" を期待し、他のすべてのプロパティが "Z" を示すことになる）または Dvorak キーボードレイアウト（これはユーザーが "F" を期待する）であっても、常に "KeyY" を返します。ユーザーに正しいキーストロークを表示したい場合は、 `Keyboard.getLayoutMap()` を使用してください。

`KeyboardEvent.ctrlKey` 読取専用 

論理値で、そのキーイベントが発生した際に `Ctrl` キーが押されていれば `true` を返します。

`KeyboardEvent.isComposing` 読取専用 

論理値で、このイベントが `compositionstart` と `compositionend` の間に発生したものであれば `true` を返します。

`KeyboardEvent.key` 読取専用 

文字列で、このイベントが表すキーのキー値を表します。

`KeyboardEvent.locale` 読取専用 

文字列で、キーボードに設定されているロケールを示すロケール文字列を返します。ブラウザーや端末がキーボードのロケールを知らない場合は空文字列となります。

**メモ:** このプロパティは入力データのロケールを表すわけではありません。例えば、ユーザーが使用するキーボードレイアウトと入力テキストとで言語が異なる場合があります。

`KeyboardEvent.location` 読取専用 

数値で、キーボードなどの入力機器上のキーの位置を表す値を返します。位置を特定する定数の一覧は、上記のキーボード上の位置にあります。

`KeyboardEvent.metaKey` 読取専用 

論理値で、このキーイベントが発生した際に `Meta` キー（Mac キーボードでは `⌘ Command` キー、 Windows キーボードでは Windows キー (`⊞`)）が押されていれば `true` を返します。

`KeyboardEvent.repeat` 読取専用 

論理値で、このキーが押し続けられて自動リピートしている場合に `true` を返します。

`KeyboardEvent.shiftKey` 読取専用 

論理値で、このキーイベントが発生した際に `Shift` キーが押されていれば `true` を返します。

例
-

### addEventListener による keydown の例

この例では、 `<input>` 要素内でキーを押すたびに、 `KeyboardEvent.code` 値を記録します。


```html
<input placeholder="ここをクリックして、キーを押してください。" size="40" />
<p id="log"></p>
```



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

input.addEventListener("keydown", logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}
```

### onkeydown による同等の例


```js
input.onkeydown = logKey;
```

仕様書
---

| Specification |
| --- |
| UI Events # event-type-keydown |
| HTML Standard # handler-onkeydown |

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

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

関連情報
----

* `input`
* `keypress`
* `keyup`