HTMLのボタンを押すとキーボードのキーが押されるようにするには

前提・実現したいこと

htmlじょうのボタンを押すと、enterを押したら、キーボードのenterや上矢印を押したら、キーボードの↑などが押されるようにしたいのですが、どのようにしたらいいのかわからないので、教えてほしいです。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<body>
4 
5<div  style="position:absolute; left:20px; top:630px; width:310px; height:110px; z-index:1">
6<input id="arrow8" type="button"  onClick="up()" value="↑ タッチ用" style="width:100px; height:50px; color:red">
7<input type="button" onClick="enter()"　value="enter" style="width:100px; height:50px; color:black">
8<input type="button" onClick="left()"　value="←タッチ用" style="width:100px; height:50px; color:blue">
9<input type="button" onClick="right()"　value="タッチ用→" style="width:100px; height:50px; color:green">
10<input type="button" onClick="down()"　value="タッチ用 ↓" style="width:100px; height:50px; color:brown">
11</div>
12    
13<script>
14function enter(){
15ここがわからない
16}
17・
18・
19・
20function down(){
21ここがわからない
22}
23</script>
24    
25</body>
26</html>

試したこと

やりたいようなもの。

行動規範の内容に同意します

回答2件

参考記事を元に試してみましたが、中々難しいですね。

参考記事では、「キー入力をJavaScriptに代行させる」ことがテーマになっていて、その方法として、KeyboardEvent等を使う方法が提案されています。同時に、その方法はあまりドキュメント化されておらず、間違った内容の記事が多いとも書かれています。つまり、やろうとしていることは、かなり難易度の高い内容であるわけです。
その難易度の高い方法をこのように放り出されても、回答者は「元々知っている人」はまずいないわけですから、回答は得られにくいと思います。

そこで、まず、「そもそもやりたいことは何か」を明確にしましょう。
やりたいことが、既存の特定ウェブサイトに対して「キー入力を代行させる」なら、セキュリティ上の理由でできない可能性が高いです。
あるいは、「特に目的はないが、なんとなく面白そうだからやってみたい」ならそう書いてください。「なんとなく面白そうだからやってみたい」も立派な目的ですが、その場合は、「それはできないけど〇〇ならできる」という対案を出すことは意味がなくなります。これに対して、「そもそもやりたいこと」が別にあるなら、「それはできないけど〇〇ならできる」という対案を出せる可能性があります。

私も参考記事を元にスクリプトを書いてみましたが、イベントを発生させること自体はできましたが、その結果ブラウザ上にキー入力されるなどの変化はおきませんでした。これだとおそらく意味がないですよね。

私がテストスクリプトを書く上で、以下の記事を参考にしました。

KeyboardEvent - Web API | MDN

EventTarget.dispatchEvent() - Web API | MDN

投稿2020/08/22 02:32

ockeghem

総合スコア11701

Winter_1214

2020/08/23 01:09

回答ありがとうございます。そんなに難易度が高いことだったんですね。今初めて知りました。どおりでできないわけですか... 目的は、WEBでRPGの作り方を教えてくれるのがあり、それをまねして作っていてそれが終わった。そこで、ほかのもので作った中に、buttonを押したら進むというのがあったので、それを使おうした。しかし、その時のコードをあまりよく理解していなかったので、自分でキーを入力させているのかと勘違いして解釈していた。そのため、キーボードのキーをおさせることができないとも知らずに、できるのかなっと思って作っていた結果わからなくなり、質問させていただきました。

行動規範の内容に同意します

JavaScriptはイベント駆動なので、キーが押された際にそのキーがなにかを判断することはできても(参考)、「キーボードのキーをおさせる」ことはできません。
できてしまったらユーザーにイタズラができてしまいます。意図しない情報を勝手に送信できてしまいます。

なので、「画面上のボタンに準じた行動を画面上でする」形になります。
「↑ボタンを押したら対象の要素を上に移動」のような形で。現在の位置を基準にする必要があるのでグローバル変数、またはWebStorageに保持しておくような仕組みも要件によっては導入検討してください

投稿2020/08/22 00:02

m.ts10806

総合スコア80850

Winter_1214

2020/08/23 01:14 編集

回答ありがとうございます。なるほど、そういった訳があり、できないんですね。下記に書いてある案でもできそうなので、少しやってみようと思います。やってみようとは思うのですが、最近興味がわき触り始めたので、すぐに苦戦しだすと思いますので、再度teratailに質問すると思います。その時はまた、回答していただければ幸いです。

行動規範の内容に同意します

あなたの回答