DOM

：

：

Element：keydown イベント

　編集：2022.10.18 by T.A.

[Edge]。→、

要素でキーが押されたときに発生します。シフト キーなどの装飾キーも発生します。

keypress イベントの場合は、入力が確定しているキーで発生します。シフト キーなどの装飾キーは発生しません。

mdn： keypress イベントとは異なり、keydown イベントは生成する文字値に関係なくすべてのキーで発生します。

mdn： keydown と keyup イベントは、どのキーが押されたかを示すコードを提供し、keypress はどの文字が入力されたかを示します。例えば、小文字の "a" は keydown と keyup では 65 と報告され（¶keyCode）、keypress では 97 と報告されます。大文字の "A" は、どのイベントでも 65 と報告されます。

mdn： キーボードイベントは <input>、<textarea> と contentEditable 属性または tabindex="-1" を持つものだけが生成します。

mdn： Firefox 65 以降では、CJKT ユーザーのブラウザー間の互換性を高めるために、keydown および keyup イベントが IME 変換中に発行されるようになりました（バグ 354358）。変換操作中の keydown イベントをすべて無視するには、次のようにしてください（229 は、IME によって処理されたイベントに関連する keyCode に設定される特別な値です）。

バブリング ¶あり
キャンセル ¶可能
インターフェイス KeyboardEvent
イベント ハンドラー プロパティ onkeydown
例
mdnより

この例では、<input> 要素内でキーを押すたびに、KeyboardEvent.code 値を記録します。

HTML： 

<input placeholder="ここをクリックして、キーを押してください。" size="40">
<p id="log"></p>

JavaScript： 

const input = document.querySelector('input');
const log = document.getElementById('log');

input.addEventListener('keydown', logKey);

function logKey(e) {
  log.textContent += ` ${e.code}`;
}

HTML： 

<INPUT id=IdTest><BR>
<SPAN id=IdLog></SPAN><BR>
<SPAN id=IdLog2></SPAN><BR>

JavaScript： 

function Job(eve){ //keydownイベントの処理：
  D=eve; //＝[object]：[object KeyboardEvent]。FEP 使用で「あ」を入力するために [a]キーを押した時。

詳細	//isTrusted＝[boolean]：true
	//key＝[string]：Process
	//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]：229
	//…



詳細	//＝[object]：[object KeyboardEvent]。英数入力で[a]を押した時。
	//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
	//…


  IdLog.innerHTML="code："+ eve.code +"、key："+ eve.key;
}
function Job2(eve){ //keypressイベントの処理：
  DA=eve; //＝[object]：[object KeyboardEvent]。英数入力で[a]を押した時。

詳細	//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]：97
	//keyCode＝[number]：97
	//…


  IdLog2.innerHTML="code："+ eve.code +"、key："+ eve.key;
}
IdTest.onkeydown=Job;
IdTest.onkeypress=Job2;
テスト