備忘録的プログラミングリファレンス

KeyboardEventインターフェイス

 KeyboardEventインターフェイスは、キーボード操作によって発生するイベントに関するインターフェイスです。 キーボード入力が許可されたinputtextareaなどのformエレメントが対象です。

 ユーザーインターフェイスから生成された場合にはUiEventインターフェイスを継承します。 その他の場合は、Eventインターフェイスを継承しています。継承するEventインターフェイスのPropertyとMethod、Eventタイプが使えます。

ユーザーインターフェイスから生成された場合のKeyboardEvent継承図
ユーザーインターフェイスから生成された場合以外のKeyboardEvent継承図
  • Event
    • └── KeyboardEvent

formエレメント以外のKeyboadイベントの設定

formエレメント以外でキーボードイベントを捉えるには、 tabindex属性 でエレメントがフォーカスされるようにすることです。
 tabindexの値が0以上の場合はタブによってフォーカスされる対象になります。マイナスの値の場合はタブによってフォーカスが移動されませんが、フォーカスの対象にすることができます。

<div tabindex="-1" onkeydown="alert(event.key)">
<p>
タブによるフォーカスの移動はありませんが、フォーカスはされます。
フォーカスされることでキーボードイベントが利用できるようになります。
</p>
</div>
	

Constructor

KeyboardEvent() KeyboardEvent オブジェクトを生成します。

Properties

Example Syntax

var bubbles_value = KeyboardEvent.bubbles;
Property
altKeyaltキーが押されているとtrueを返す
code押されたキーコード値を返す(keyプロパティを推奨)
ctrlKeyCtrlキーが押されているとtrueを返す
isComposingあるイベントがcompositionstartからcompositionendの間で発生したものならtrueを返します。
key押されたキーボードのキーコード値
localeキーボードでに設定されたローケルをDOMStringで返します。
locationキーボードまたは何らかの入力デバイスのどの辺が押されたか
metaKeyマウスイベント発生時にMETAキーが押されていればtrue
repeatキーが押し下げられ続けていればtrueを返します。
shiftKeyShiftキーが押されているとtrueを返します。

Methods

Method
getModifierState()修飾キー(Alt、AltGraph、CapsLock、Control、Meta、NumLocK、ScrollLock、Shift)が押されているか

KeyboardEvent Types

 KeyboardEventタイプはエレメントに設定してwebページで起こるイベントを捉えます。

Example Syntax

object.onabort = function(){script_or_function};
KeyboardEvent type
onkeydownキーボードを押す。
onkeypress非推奨。keydownイベントを利用することが推奨されている。キーボードのキーを押した。ただし、ALT, CTRL, SHIFT, ESCキーには反応しない。
onkeyupキーボードのキーを離した。