キーボードイベント

キーボードイベントの種類

キーボードイベントは、ユーザーがキーボードを押すことによってトリガーされます。keydown、keypress、keyup という 3 つの主なイベントがあり、これらはすべて KeyboardEvent インターフェイスを継承します。

keydown: キーボードが押されたときにトリガーされます。
keypress: 値のあるキーが押されたときにトリガーされます。つまり、Ctrl、Alt、Shift、Meta などの値のないキーが押された場合、このイベントはトリガーされません。値を持つキーの場合、押されると最初に「keydown」イベントがトリガーされ、次にこのイベントがトリガーされます。
keyup: このイベントは、キーボードが放されたときにトリガーされます。

ユーザーがキーを押し続けて放さない場合、キーボードイベントは継続的にトリガーされます。トリガーシーケンスは次のとおりです。

1.キーダウン 1.キーを押す 1.キーダウン 1.キーを押す

...(上記のプロセスを繰り返します) 1.キーアップ

KeyboardEvent インターフェースの概要

KeyboardEvent インターフェイスは、キーボードとユーザーの対話を記述するために使用されます。このインターフェイスは「Event」インターフェイスを継承し、独自のインスタンスプロパティとインスタンスメソッドを定義します。

ブラウザーは、キーボードイベントの新しいインスタンスを作成するために使用される KeyboardEvent コンストラクターをネイティブに提供します。

new KeyboardEvent(タイプ、オプション)

KeyboardEvent コンストラクターは 2 つのパラメーターを受け入れます。最初のパラメータはイベントタイプを示す文字列で、2 番目のパラメータはオプションのイベント構成オブジェクトです。「Event」インターフェースによって提供されるプロパティに加えて、次のフィールドを設定することもできます。これらはすべてオプションです。

key: 文字列、現在押されているキー。デフォルトは空の文字列です。
code: 現在押されているキーの文字列形式を表す文字列。デフォルトは空の文字列です。
location: 整数、現在押されているキーの位置。デフォルトは 0 です。
ctrlKey: ブール値、Ctrl キーを押すかどうか、デフォルトは false です。
shiftKey: ブール値、Shift キーを押すかどうか。デフォルトは false です。
altKey: ブール値、Alt キーを押すかどうか。デフォルトは false です。
metaKey: ブール値、Meta キーを押すかどうか、デフォルトは false です。
repeat: ブール値、キーの押下を繰り返すかどうか。デフォルトは false です。

KeyboardEvent のインスタンスプロパティ

KeyboardEvent.altKey、KeyboardEvent.ctrlKey、KeyboardEvent.metaKey、KeyboardEvent.shiftKey

次のプロパティはすべて読み取り専用のプロパティであり、対応するキーが押されたかどうかを示すブール値を返します。

KeyboardEvent.altKey: Altキーが押されたかどうか
KeyboardEvent.ctrlKey: Ctrlキーが押されたかどうか
KeyboardEvent.metaKey: メタキーを押すかどうか (Mac システムは 4 枚の花弁、Windows システムは Windows キー)
KeyboardEvent.shiftKey: Shift キーが押されたかどうか

ここに例を示します。

関数 showChar(e) {
  console.log('ALT: ' + e.altKey);
  console.log('CTRL: ' + e.ctrlKey);
  console.log('メタ: ' + e.metaKey);
  console.log('Shift: ' + e.shiftKey);
}

document.body.addEventListener('keydown', showChar, false);

KeyboardEvent.code

KeyboardEvent.code プロパティは、現在押されているキーの文字列表現を表す文字列を返します。このプロパティは読み取り専用です。

以下は、一般的に使用されるいくつかのキーの文字列形式です。他のキーについては、ドキュメントを確認してください。

数字キー 0 ～ 9: 数字 0 ～ 数字 9 を返します
文字キー A ～ z: KeyA ～ KeyZ を返します。
ファンクションキー F1 - F12: F1 - F12 を返します。
矢印キー: ArrowDown、ArrowUp、ArrowLeft、ArrowRight に戻ります。
Alt キー: AltLeft または AltRight を返します。
Shift キー: ShiftLeft または ShiftRight を返します。
Ctrl キー: ControlLeft または ControlRight に戻ります。

KeyboardEvent.key

KeyboardEvent.key プロパティは、押されたキーの名前を表す文字列を返します。このプロパティは読み取り専用です。

押されたキーが印刷可能な文字を表す場合、数字や文字などのこの文字が返されます。

押されたキーが印刷不可能な特殊文字を表す場合は、Backspace、Tab、Enter、Shift、Control、Alt、CapsLock、Esc、Spacebar、PageUp、PageDown、End、Home、Left、Right などの事前定義されたキー値が返されます。、Up、Down、PrintScreen、Insert、Del、Win、F1～F12、NumLock、Scroll など

コントロールキーと記号キーが同時に押された場合は、記号キーのキー名を返します。たとえば、Ctrl + a を押すと「a」が返され、Shift + a を押すと大文字の「A」が返されます。

キー名が認識できない場合は、文字列「Unidentified」が返されます。

KeyboardEvent.location

「KeyboardEvent.location」プロパティは、押されたキーがキーボードのどの領域にあるかを示す整数を返します。次の値を取ることができます。

0: キーボードのメイン領域にあるか、どの領域にあるかを判断できません。
1: キーボードの左側では、2 つの位置を持つキー (Ctrl キーや Shift キーなど) にのみ適用されます。
2: キーボードの右側では、2 つの位置を持つキー (Ctrl キーや Shift キーなど) にのみ適用されます。
3: テンキー上。

KeyboardEvent.repeat

KeyboardEvent.repeat は、キーを繰り返すかどうかを決定するために、キーが押し続けられているかどうかを表すブール値を返します。つまり、ブラウザーは、ユーザーがキーを押すまで、keydown および keypress イベントをトリガーし続けます。手を離す。

KeyboardEvent のインスタンスメソッド

KeyboardEvent.getModifierState()

KeyboardEvent.getModifierState() メソッドは、指定されたファンクションキーが押されたかアクティブになったかを示すブール値を返します。共通パラメータは以下の通りです。

Alt: Alt キー
CapsLock: Caps ロックキー
Control: Ctrl キー
Meta: メタキー
NumLock: テンキー切り替えキー
Shift: シフトキー

もし （
  イベント.getModifierState('コントロール') +
  イベント.getModifierState('Alt') +
  イベント.getModifierState('メタ') > 1
) {
  戻る;
}

上記のコードは、Control、Alt、および Meta のいずれかの 2 つ以上のキーが同時に押されている限り、戻ることを示しています。

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章

キーボードイベント