【JavaScript】Enterキーを押すなどのキーボードイベントを発行する方法

　JavaScriptでのイベント操作は、開発者がWebページを制御するための強力なツールです。例えばelement.click()でクリックイベントを発行できたりできます。しかし、clickイベントなど一部のイベントは簡単に扱えますが、キーボードを押したりするイベントなどは扱いが難しくなることがあります。この記事では、JavaScriptを使ってEnterキーなどのキーボードイベントを発火させる方法を説明します。

　キーボードイベントは、キーが押されたり離されたりすると発生するイベントです。例として、Enterキーが押された時の処理をイベントの発行から実行する方法を紹介します。これは例えば次のコードでできます。

const textAreaEl = document.querySelector('textarea');
textAreaEl.dispatchEvent(new KeyboardEvent('keydown', {
    // Enter キーを表現する
    // @sse https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/key
    key: 'Enter',
    // 古いコードだとこちらの 13 で Enter キーを表現している
    // @see https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/keyCode
    keyCode: 13,
}));

　キーボードイベントを発行するには、まず対象となるHTML要素を取得します。その後、dispatchEvent()メソッドを使ってイベントを発行します。この際、引数にはKeyboardEventコンストラクタを使ってイベントの詳細を設定したオブジェクトを渡します。

上記の例では、次のようにしてキーボードイベントを発行しています。

1. document.querySelector(‘textarea’)を使って、対象となるテキストエリア要素を取得します。
2. dispatchEvent()メソッドを使って、keydownイベントを発火させます。
3. イベントの詳細を設定するために、KeyboardEventコンストラクタを使ってオブジェクトを生成します。この際、keyプロパティには’Enter’を、keyCodeプロパティには13を設定します。これらの値は、Enterキーが押されたことを示しています。

　キーボードイベント以外のイベントも、同様の方法で発行することができます。例えば、マウスイベントを発行するには、MouseEventコンストラクタを使ってオブジェクトを生成し、dispatchEvent()メソッドに渡します。他にどのようなイベントがあるかは次のMDNのページが詳しいです。

UIEvent – Web API ｜ MDN

　また、実際にどのようなイベントにどのような引数を使えばいいかですが、これは AI や TypeScript を使うと大分楽です。例えば ChatGPT ならやりたいことに応じたスニペットを次の様にさっくり作ってくれます。第二引数が変幻自在なため手作業だと手間になりやすいのですが、こんな感じでツールの助けを借りれるとずいぶん楽になります。

　イベントをJavaScript内から発行するというのはテストや既に存在するwebページのコードに対して色々する際に便利です。