SYNCERのロゴ
アイキャッチ画像

KeyboardEvent - キーボードイベント

KeyboardEventは、キーボード操作に関連するイベントで取り扱われるインターフェイスです。

概要

名前
KeyboardEvent
継承
IDL
[Constructor(DOMString type, optional KeyboardEventInit eventInitDict), Exposed=Window]
interface KeyboardEvent : UIEvent {
  // KeyLocationCode
  const unsigned long DOM_KEY_LOCATION_STANDARD = 0x00;
  const unsigned long DOM_KEY_LOCATION_LEFT = 0x01;
  const unsigned long DOM_KEY_LOCATION_RIGHT = 0x02;
  const unsigned long DOM_KEY_LOCATION_NUMPAD = 0x03;

  readonly attribute DOMString key;
  readonly attribute DOMString code;
  readonly attribute unsigned long location;

  readonly attribute boolean ctrlKey;
  readonly attribute boolean shiftKey;
  readonly attribute boolean altKey;
  readonly attribute boolean metaKey;

  readonly attribute boolean repeat;
  readonly attribute boolean isComposing;

  boolean getModifierState(DOMString keyArg);
};

dictionary KeyboardEventInit : EventModifierInit {
  DOMString key = "";
  DOMString code = "";
  unsigned long location = 0;
  boolean repeat = false;
  boolean isComposing = false;
};

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

dictionary UIEventInit : EventInit {
  Window? view = null;
  long detail = 0;
};

dictionary EventInit {
  boolean bubbles = false;
  boolean cancelable = false;
  boolean composed = false;
};
// KeyboardEvent
partial interface KeyboardEvent {
  // The following support legacy user agents
  readonly attribute unsigned long charCode;
  readonly attribute unsigned long keyCode;
};
仕様書
https://w3c.github.io/uievents/#keyboardevent
https://w3c.github.io/uievents/#legacy-interface-KeyboardEvent (KeyboardEvent)

チュートリアル

KeyboardEventは、keydownイベントやkeyupイベントなどでコールバック関数に渡されるオブジェクトです。

var callbackFn = function ( event ) {
	console.log( event ) ;
}

element.onkeydown = callbackFn ;
element.onkeyup = callbackFn ;

コンストラクタ

KeyboardEvent()

新しいKeyboardEventのオブジェクトを作成します。

プロパティ

altKey

イベント発生時にaltキーが押されているか否かを返します。

charCode

イベントを発生させたボタンに対応するコードを返します。このイベントはkeypressイベントで有効です。

code

イベントを発生させたボタンに対応するコードを文字列で返します。

ctrlKey

イベント発生時にcontrolキーが押されているか否かを返します。

isComposing

入力が未確定か否かを返します。

key

イベントを発生させたボタンの値を返します。

keyCode

イベントを発生させたボタンに対応するコードを返します。

location

イベントを発生させたボタンの、キーボード上の位置を数値で返します。

metaKey

イベント発生時にmetaキーが押されているか否かを返します。

repeat

イベントが、ボタンの押しっ放しによる繰り返し入力により発生したか否かを返します。

shiftKey

イベント発生時にShiftキーが押されているか否かを返します。

メソッド

getModifierState()

引数のキーを押しているか否かを返します。

定数

DOM_KEY_LOCATION_LEFT

0x01を返します。この値は、キーボードにおけるボタンの位置が左側であることを表します。

DOM_KEY_LOCATION_NUMPAD

0x03を返します。この値は、キーボードにおけるボタンの位置がテンキーの位置であることを表します。

DOM_KEY_LOCATION_RIGHT

0x02を返します。この値は、キーボードにおけるボタンの位置が右側であることを表します。

DOM_KEY_LOCATION_STANDARD

0x00を返します。この値は、キーボードにおけるボタンの位置がスタンダードな位置(中央の英数字など)であることを表します。

イベント

固有のイベントハンドラはありません。

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

FeaturesChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
KeyboardEvent 7.1+ 7.0+
altKey 43+ 7.1+ 7.0+
charCode 43+ 7.1+ 9+ 15+ 7.0+
code 48+ 38+ 10+×× 35+ 11.0+×
ctrlKey 19+ 5+ 6.0+ 6.0+ 4.3+
DOM_KEY_LOCATION_LEFT 30+ 15+ 7.1+ 9+ 17+ 8.3+ 4.4+
DOM_KEY_LOCATION_NUMPAD 30+ 15+ 7.1+ 9+ 17+ 8.3+ 4.4+
DOM_KEY_LOCATION_RIGHT 30+ 15+ 7.1+ 9+ 17+ 8.3+ 4.4+
DOM_KEY_LOCATION_STANDARD 30+ 15+ 7.1+ 9+ 17+ 8.3+ 4.4+
getModifierState() 30+ 15+ 10+ 9+ 17+ 10.0+ 4.4+
isComposing 56+ 31+ 10+×× 45+ 10.0+×
key 51+ 23+ 10+ 9+ 38+ 10.0+×
KeyboardEvent() 26+ 31+ 7.1+× 15+ 7.0+ 4.4+
keyCode 43+ 7.1+ 7.0+
location 43+ 15+ 7.1+ 9+ 17+ 8.3+ 4.4+
metaKey 43+ 7.1+ 9+ 7.0+
repeat 43+ 28+ 10+ 19+ 10.0+×
shiftKey 19+ 5+ 6.0+ 6.0+ 4.3+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月9日 (月)
コンテンツを公開しました。