DOM

KeyboardEvent コンストラクター

 編集:2022.10.12 by T.A.

[Edge]○。→

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

構文
new KeyboardEvent(type, options)
type イベントの名前を表す文字列。大文字と小文字の区別される。ブラウザーでは keydownkeyupkeypress の何れかに設定します。
options 省略可。オブジェクト。UIEvent() で定義されているものに加え、以下のプロパティを持つことができます。
プロパティ説明と値
key 省略可。文字列。既定値は ""。KeyboardEvent.key の値を設定します。
code 省略可。文字列。既定値は ""。KeyboardEvent.code の値を設定します。
location 省略可。文字列。既定値は 0。KeyboardEvent.location の値を設定します。
repeat 省略可。論理値。既定値は false。KeyboardEvent.repeat の値を設定します。
isComposing 省略可。論理値。既定値は false。KeyboardEvent.isComposing の値を設定します。
charCode 省略可 非推奨。数値。既定値は 0。非推奨の KeyboardEvent.charCode の値を設定します。
keyCode 省略可 非推奨。数値。既定値は 0。非推奨の KeyboardEvent.keyCode の値を設定します。
which 省略可 非推奨。数値。既定値は 0。非推奨の UIEvent.which の値を設定します。
ctrlKey 省略可。論理値。既定値は false。KeyboardEvent.ctrlKey の値を設定します。
shiftKey 省略可。論理値。既定値は false。KeyboardEvent.shiftKey の値を設定します。
altKey 省略可。論理値。既定値は false。KeyboardEvent.altKey の値を設定します。
metaKey 省略可。論理値。既定値は false。KeyboardEvent.metaKey の値を設定します。
戻り値

新しい KeyboardEvent オブジェクト。

HTML:

<SPAN id=IdTest contenteditable>[SPAN要素。ここで編集操作…]</SPAN><BR>
<SPAN id=IdLog></SPAN>

JavaScript:

function Job(eve){ //keydown イベントの処理:
  D=eve;  //=[object]:[object KeyboardEvent]。スクリプトによりイベントを発生させた。
詳細 //isTrusted=[boolean]:false //key=[string]:a //code=[string]:KeyA //location=[number]:0 //ctrlKey=[boolean]:false //shiftKey=[boolean]:false //altKey=[boolean]:false //metaKey=[boolean]:false //repeat=[boolean]:false //isComposing=[boolean]:false //charCode=[number]:0 //keyCode=[number]:0 //DOM_KEY_LOCATION_STANDARD=[number]:0 //DOM_KEY_LOCATION_LEFT=[number]:1 //DOM_KEY_LOCATION_RIGHT=[number]:2 //DOM_KEY_LOCATION_NUMPAD=[number]:3 //getModifierState=[function]:function getModifierState() { [native code] } //initKeyboardEvent=[function]:function initKeyboardEvent() { [native code] } //view=[object]:null //detail=[number]:0 //sourceCapabilities=[object]:null //which=[number]:0 //initUIEvent=[function]:function initUIEvent() { [native code] } //type=[string]:keydown //target=[object]:[object HTMLSpanElement] //currentTarget=[object]:null //eventPhase=[number]:0 //bubbles=[boolean]:false //cancelable=[boolean]:false //defaultPrevented=[boolean]:false //composed=[boolean]:false //…
IdLog.innerHTML=IdLog.innerHTML+"●"; //表示。 } IdTest.onkeydown=Job; //イベント割り当て。 Ev=new KeyboardEvent('keydown', {key:'a', code:'KeyA'}); //イベント生成。 IdTest.dispatchEvent(Ev); //イベントを起こす。

スクリプトでイベントを発生させても、起きた要素内容には何も影響はないようです。

SPAN要素で [a] キーを押した場合に発生したイベントで得た内容

//D=[object]:[object KeyboardEvent]
詳細//isTrusted=[boolean]:true //key=[string]:a //code=[string]:KeyA //location=[number]:0 //ctrlKey=[boolean]:false //shiftKey=[boolean]:false //altKey=[boolean]:false //metaKey=[boolean]:false //repeat=[boolean]:false //isComposing=[boolean]:false //charCode=[number]:0 //keyCode=[number]:65 //DOM_KEY_LOCATION_STANDARD=[number]:0 //DOM_KEY_LOCATION_LEFT=[number]:1 //DOM_KEY_LOCATION_RIGHT=[number]:2 //DOM_KEY_LOCATION_NUMPAD=[number]:3 //getModifierState=[function]:function getModifierState() { [native code] } //initKeyboardEvent=[function]:function initKeyboardEvent() { [native code] } //view=[object]:[object Window] //detail=[number]:0 //sourceCapabilities=[object]:[object InputDeviceCapabilities] //which=[number]:65 //initUIEvent=[function]:function initUIEvent() { [native code] } //type=[string]:keydown //target=[object]:[object HTMLSpanElement] //currentTarget=[object]:null //eventPhase=[number]:0 //bubbles=[boolean]:true //cancelable=[boolean]:true //defaultPrevented=[boolean]:false //composed=[boolean]:true //…

Element:keydownEventTarget.dispatchEvent()innerHTML


テスト