TypeScript: div要素でkeydownイベントを受け取る

2022年12月8日(木)

環境

div要素でkeydownイベントを受け取る

GitHubのリポジトリ

https://github.com/yvafdevnsk/typescript/tree/main/div-keydown

ファイルの一覧

div-keydown
    |- div-keydown.html
    |- div-keydown.css
    |- div-keydown.ts
    |- div-keydown.js (tsファイルから生成される)
    |- tsconfig.json

目標

要点

実装1: div要素の定義

div要素をtabindex=-1とすることでJavaScriptまたはマウスクリックでフォーカスを設定できる。キーボードのtabキーによるフォーカス移動の対象にはならない。

<div id="div-keydown" tabindex="-1"></div>

実装2: イベントリスナーの登録

const keydownDiv: HTMLElement | null = document.getElementById("div-keydown");
if (keydownDiv !== null) {
    keydownDiv.addEventListener("keydown", keydownDivKeydownEventListener);
    keydownDiv.addEventListener("focusin", keydownDivFocusInEventListener);
    keydownDiv.addEventListener("focusout", keydownDivFocusOutEventListener);
}

実装3: div要素にフォーカスを設定

マウスクリックでフォーカスを設定できる。

JavaScriptでフォーカスを設定する。

const keydownDiv: HTMLElement | null = document.getElementById("div-keydown");

// setTimeout()しないとfocusin > focusout > focusinと3回イベントが発生する。
setTimeout(() => {
    keydownDiv?.focus();
}, 0);

実装4: focusinイベントの処理

function keydownDivFocusInEventListener(e: FocusEvent): void {
    console.log("keydownDivFocusInEventListener e", e);
}

実装5: focusoutイベントの処理

function keydownDivFocusOutEventListener(e: FocusEvent): void {
    console.log("keydownDivFocusOutEventListener e", e);
}

実装6: keydownイベントの処理

function keydownDivKeydownEventListener(e: KeyboardEvent): void {
    console.log("keydownDivKeydownEventListener e", e);
}

ビルドする

$ npx tsc --target es2015 div-keydown.ts

確認する

F12キーでブラウザの開発者ウインドウを表示してコンソールのログを確認する。

サンプルページを表示する

参考情報