物理的ではなくJavaScript上でキーボードを押したという判定を作りたい

Question

前提・実現したいこと

JavaScript上でキーボードが押されたというのを実現したい

###試したこと
上記サイトを参考にしたサイト
https://ameblo.jp/personwritep/entry-12456996738.html

document.dispatchEvent( new KeyboardEvent( "keyup",{key: "a" }));
window.document.onkeyup = function(event){
alert(document);
}

上記を試したところ
「a」と表示されると思ったら
アラートに「object HTMLDocument」と表示されてしまいました。

alert(document);
の部分が「a」が押された情報を持つにはどうすれば良いでしょうか。

Comments

[m.ts10806]

質問に書いてないことは誰にも分かりませんので
「調べた」のであれば調べたことも記載してください。
調べたなら何かしら試すでしょうから試したことも。
理解できなかったのならどのあたりがどう理解できなかったか。

でないと「もうそれを見た」という後出しされるとせっかくの回答が無駄になります。
書いてあることが全てなので、回答者は「こういうところは調べただろうな」「ここまでやっただろうな」というエスパーは一切してくれませんし、する必要はありません。
本当に調べず試さず丸投げする人との区別はつけられません。
質問は編集できますので、適宜調整してください。

できれば、「質問するときのヒント」を読み、「質問テンプレート」を使ってくださいね。
https://teratail.com/help/question-tips

[yambejp]

質問も初心者のようなので「具体的になにをしたときに、どういう結果を得たいか」を明記するようにしてください

[nano_09]

すみません、以後気を付けたいと思います。
ご指摘ありがとうございました。

[m.ts10806]

質問は編集できますので、適宜調整してください。

と書いてます。
いつくるか分からない次回に回すより今対応してください

[m.ts10806]

documentをalertしたらそうなるのは当然で、何を意図した結果なのかも記載して欲しいですね。
あと、コードブロック内はコードだけにしてください。リンクは別のマークダウンで対応できます。

Answer 1

// キーを押した時のイベントをドキュメントに指定
window.document.onkeyup = function( event ){
  // キーが押された時に、実行される領域
  console.log(event);
};

// キーを押させる
document.dispatchEvent( new KeyboardEvent( "keyup",
  {
    // キーを指定
    key: "a"
  }
));
// ただし、codeプロパティを指定しないと、意図した挙動は実現できないと思われる
// codeは実際のキーボードを押した時との対応表などを探し出して、自身で指定する

Comments

[nano_09]

window.document.onkeydown = function(event){
console.log(event);
};
document.dispatchEvent(new KeyboardEvent("keydown",{
bubbles:"true",
cancelable:"true",
keyCode:"65"
}));

上記で上手く動作しました。
ありがとうございました。

[miyabi_pudding]

解決したなら、BA選出するか、自己解決投稿で質問を閉じましょう。

Answer 2

この辺とか、この辺とか。試してはないんですが、調べたら出てくるのでまずは試してみてはいかがでしょうか？

Comments

[nano_09]

多少は調べたんですが理解ができなくて、質問させていただきました…。
一つ目の
document.dispatcherEvent(new KeyboardEvent("keyup",{key:"a"}));
これは、このコードが「a」を押したという情報を持っているんでしょうか？

[nano_09]

例えば、一つ目ので行くと
ちゃんと「a」が押されたか確認したいので
alertで表示しようとなったときにどういう風に書けばいいですか？

[yuuyu]

> このコードが「a」を押したという情報を持っているんでしょうか？
いいえ、new KeyboardEvent("keyup",{key:"a"})でキーイベント（"a"のキーボードを離した）を作成し、それを"document"に送信しています。
https://developer.mozilla.org/ja/docs/Web/API/EventTarget/dispatchEvent
https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent

> どういう風に書けばいいですか？
一度ご自身で書いてみて、それでも分からない箇所を質問してみてください。
ちなみにキー入力を受け取る判定はここ( https://qiita.com/riversun/items/3ff4f5ecf5c21b0548a4 )やここ( https://blog.katsubemakito.net/html5/javascript-keycode )など、調べたら出てきますので。

[nano_09]

わからなかったので質問させていただきます。
documentに送信されたものを取りだし方がわかりません。

[yuuyu]

> documentに送信されたものを取りだし方がわかりません。
修正欄にも書かれていますが、「どのあたりがどう理解できなかったか」と言うのが分からないと、丸投げと特に変わりません。
しかも今回であれば、先ほどのurlに書いているので、もう一度読んでくださいとしか言えなくなります。
実際に考えて、"取りだし方"をどのように書いてみたけど分からなかったのか。そういう所も記述してください。
あと回答からは少しズレますが、「〜分かりません」は質問ではなく報告です。

[nano_09]

すみません、ご指摘ありがとうございます。
確かに丸投げになっていました。
以後、気を付けたいと思います。