[Edge]○。→、
このオブジェクトは、キーボードによるユーザーの操作を示します。個々のイベントがユーザーとキーとの間の単一の操作（または修飾キーとの組み合わせ）を表します。イベントの種類（keydown、keypress、keyup）はキーボード操作が発生した種類を識別します。
メモ： KeyboardEvent は、単にユーザーがキーボードのキーで行った操作が何であるかを低水準で示すものであり、その操作のその場面における意味は持ちません。テキストの入力を処理したい場合は、代わりに input イベントを使用してください。ユーザーが他の種類のテキスト入力、例えば、タブレット端末やタブレット機器による手書き入力システムなどを使用している場合は、キーボード イベントが発生することはありません。
KeyboardEvent インターフェースは、以下の定数を定義しています。
以下の定数は、キー イベントがキーボードのどの部分から発信されるかを識別します。これらは、KeyboardEvent.DOM_KEY_LOCATION_STANDARD などとしてアクセスされます。
| 定数 | 値 | 説明 |
|---|---|---|
DOM_KEY_LOCATION_STANDARD
| 0x00 | イベントによって記述されたキーは、キーボードの特定の領域にあることが特定されず、テンキー上にはなく(NumLock キーでない限り)、キーボードの左右に重複しているキーについては、何らかの理由で、そのキーは、その場所に関連付けられていないことになります。
例としては、標準的な PC 101 US キーボードの英数字キー、NumLockキー、スペース バーなどがあります。 |
DOM_KEY_LOCATION_LEFT
| 0x01 | キーは、キーボード上の複数の位置に存在してもよいものであり、この例では、キーボードの左側にある。
例としては、左の Ctrlキー、Macintosh キーボードの左の Commandキー、左の Shiftキーなどがあります。 |
DOM_KEY_LOCATION_RIGHT
| 0x02 | キーは、キーボード上の複数の位置に存在してもよいものであり、この場合、キーボードの右側に位置している。
例としては、右の Shiftキーや右の Altキー（Mac キーボードの Option）などがあります。 |
DOM_KEY_LOCATION_NUMPAD
| 0x03 | キーはテンキー上に配置されているか、またはキーの発生源となる場所が複数ある場合はテンキーに関連付けられた仮想キーとなります。NumLockキーはこのグループには該当せず、常に DOM_KEY_LOCATION_STANDARD の位置でエンコードされています。
例としては、テンキー パッドの数字、キー パッドの Enterキー、キー パッドの小数点などがあります。 |
このインターフェイスには、親である UIEvent および Event から継承したプロパティもあります。
警告： これはユーザーのキーボード配列を無視しますので、ユーザーが QWERTY キーボード配列の "Y" の位置のキー（ホーム行の上の行の中ほど）を押すと、ユーザーが QWERTZ キーボード（ユーザーが "Z" だと思っており、その他のプロパティも "Z" を示している）や Dvorak キーボード配列（ユーザーは "F" だと思っている）を使用していても、常に "KeyY" を返します。
メモ： このプロパティは入力データのロケールを表すことはありません。例えば、ユーザーが使用するキーボード レイアウトと入力テキストとで言語が異なる場合があります。
このインターフェイスには、親である UIEvent および Event から継承したメソッドもあります。
注意： キーが複数の文字を挿入するマクロとして使用されている場合、この属性の値は最初の文字だけでなく文字列全体となります。
警告： この属性は非推奨です。利用可能な場合は、代わりに KeyboardEvent.key を使用する必要があります。
警告： この属性は非推奨です。利用可能な場合は、代わりに KeyboardEvent.key を使用する必要があります。
警告： この属性は非推奨です。利用可能な場合は、代わりに KeyboardEvent.key を使用する必要があります。
¶省く
<!DOCTYPE html>
<html>
<head>
<script>
'use strict';
document.addEventListener('keydown', (event) => {
const keyName = event.key;
if (keyName === 'Control') {
// do not alert when only Control key is pressed.
return;
}
if (event.ctrlKey) {
// Even though event.key is not 'Control' (e.g., 'a' is pressed),
// event.ctrlKey may be true if Ctrl key is pressed at the same time.
alert(`Combination of ctrlKey + ${keyName}`);
} else {
alert(`Key pressed ${keyName}`);
}
}, false);
document.addEventListener('keyup', (event) => {
const keyName = event.key;
// As the user releases the Ctrl key, the key is no longer active,
// so event.ctrlKey is false.
if (keyName === 'Control') {
alert('Control key was released');
}
}, false);
</script>
</head>
<body>
</body>
</html>