consoleから入力をする

題名のとおりですが、若干の追加があります。

あるWEBサイトのフォームに文字を打つというのは、consoleを開いて、
document.getElementById('ID名').value = "打ちたい文字";
で、できるそうですが、
文字の入力フォームがない状態で「キーボードのこのキーを押す」みたいな処理ってできるんでしょうか？

別に何に役立てるというわけでもないですが、タイピングの練習サイトで、自動的に入力してくれる方法とかないかな～なんて考えていますｗ

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

回答3件

キーボードイベントの再現もできますが、JavaScriptの書き方によっては認識しないこともありえます。

というのも、イベントオブジェクトにはisTrustedというフラグがあって、実際にユーザーが起こしたものはtrue、コードで起こしたものはfalseになるので、JavaScript上から区別が可能なのです。

もちろん、拡張機能やSeleniumなどのような「Webページの外側から動かすツール」であれば、そういうのとは無関係に動作します（Webページから見れば、「人間が入力した」とみなされます）。

投稿2017/10/27 00:06

maisumakun

総合スコア145183

moscow3

2017/10/27 02:28

なるほど。　拡張機能などについてはあとから調べてみます。「キーボードイベントの再現」は具体的にどのようにすればいいのでしょうか？（練習サイトがjsからの入力をブロックするつくりかどうかは分かりませんが、試してみる価値はあると思うので。）

maisumakun

2017/10/27 02:32

new KeyboardEvent（https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/KeyboardEvent）でイベントを生成して、エレメントにdispatchEventする、という形になります。ただ、MDNのページを見ての通り、きちんとキーボードからの操作を再現するには、大量に引数を指定する必要があって、結構めんどくさいです。

think49

2017/10/27 03:29

dispatchEvent はイベントを発生させますが、イベントに付随した「デフォルト動作」までは誘発されないので、注意して下さい。例えば、keypressイベントを発火させてinput要素に "a" と入力させようとした場合、keypressイベントハンドラでイベントを受け取る事は可能ですが、input要素に "a" は入力されません。同様の理屈で、 [Ctrl] + [C] キーを入力させてクリップボードにコピーさせたり、[Ctrl] + [W] キーを入力させてタブを閉じさせることも出来ません。

moscow3

2017/10/28 22:00 編集

なるほど。了解です！ところで＞例えば、keypressイベントを発火させてinput要素に "a" と入力させようとした場合、keypressイベン＞トハンドラでイベントを受け取る事は可能ですが、input要素に "a" は入力されません。＞同様の理屈で、 [Ctrl] + [C] キーを入力させてクリップボードにコピーさせたり、[Ctrl] + [W] キー＞を入力させてタブを閉じさせることも出来ません。ということは、私みたいな人以外ではどういう用途があるのでしょうか？ｗ

think49

2017/10/29 05:39

To: moscow3 さん長くなるので、新規記事で回答しました。

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

ベストアンサー

EventTarget#dispatchEvent

dispatchEvent() は DOM Events の定義に則り、イベントを発生させます。
ただし、ブラウザが持つ「デフォルト動作」と「イベントの発生」が独立している点に注意が必要です。

dispatchEvent() が実行されると、DOM Events によって定義されたイベントが発火し、イベント伝播が発生します
イベントの発火に伴い、JavaScriptで定義されたイベントハンドラ関数が呼び出されます
イベントの発生に伴うデフォルトアクション(ブラウザがデフォルト動作として指定しているもの)は誘発されません

例えば、keypressイベントを発火させてinput要素に "a" と入力させようとした場合、keypressイベントハンドラでイベントを受け取る事は可能ですが、input要素に "a" は入力されません。
同様の理屈で、 [Ctrl] + [C] キーを入力させてクリップボードにコピーさせたり、[Ctrl] + [W] キーを入力させてタブを閉じさせることも出来ません。

dispatchEvent の使い道

dispatchEvent() は対応するイベントハンドラ関数が呼び出される為、予め定義したイベントハンドラを呼び出したい場合に使用します。
次のコードは、ページ読み込み時に keypress イベントが発火したかのように振舞います。

HTML
1<input id="sample" type="text" name="sample" />
2<script>
3'use strict';
4(function () {
5  function handleKeypress (event) {
6    console.log(event.key);
7  }
8
9  function fireKeypress (element, key) {
10    element.value += key; // 該当要素ノードに key を入力する
11    element.dispatchEvent(new KeyboardEvent('keypress', {key: key}));    // keypressイベントハンドラを発火する
12  }
13
14  function main () {
15    var input = this.document.getElementById('sample');
16
17    input.addEventListener('keypress', handleKeypress, false);
18
19    fireKeypress(input, 'a'); // "a" を入力する
20    fireKeypress(input, 'b'); // "b" を入力する
21    fireKeypress(input, 'c'); // "c" を入力する
22  }
23
24  main.call(this);
25}.call(this));
26</script>

ここでは「イベントの発火」と「input要素へのキー入力」を同時に発生させていますが、「イベントの発火」に留めたい場合もあります。

submitボタンがクリックされたかのように振舞うが、フォームを送信したくない(ページ遷移したくない)場合
touchstart イベントハンドラ、click イベントハンドラを共通処理にする為に一方の処理からもう一方の処理を dispatchEvent によって誘発させるが、デフォルトアクションを2回発生させたくない(click, touchstart で2回発生)場合

このように、イベントハンドラだけを独立して呼び出したいケースがいくつか存在します。

Re: moscow3 さん

投稿2017/10/29 05:39

編集2017/10/29 05:48

think49

総合スコア18162