題名のとおりですが、若干の追加があります。
あるWEBサイトのフォームに文字を打つというのは、consoleを開いて、
document.getElementById('ID名').value = "打ちたい文字";
で、できるそうですが、
文字の入力フォームがない状態で「キーボードのこのキーを押す」みたいな処理ってできるんでしょうか?
別に何に役立てるというわけでもないですが、タイピングの練習サイトで、自動的に入力してくれる方法とかないかな~なんて考えていますw
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
キーボードイベントの再現もできますが、JavaScriptの書き方によっては認識しないこともありえます。
というのも、イベントオブジェクトにはisTrusted
というフラグがあって、実際にユーザーが起こしたものはtrue
、コードで起こしたものはfalse
になるので、JavaScript上から区別が可能なのです。
もちろん、拡張機能やSeleniumなどのような「Webページの外側から動かすツール」であれば、そういうのとは無関係に動作します(Webページから見れば、「人間が入力した」とみなされます)。
投稿2017/10/27 00:06
総合スコア145183
0
ベストアンサー
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総合スコア18162
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
入力フォームがあってもなくても、タイピングの練習サイトである以上は
入力されたコードを検知している場所があるはずなので
そこに対して情報を流せばできるのではないでしょうか。
(実際サイトを見て言っている訳ではないのであくまで予測ですが・・・)
もしくは、Seleniumなどのツールを使って、キー入力を覚えさせるか等でしょうか。
投稿2017/10/26 23:45
総合スコア928
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/27 02:28
2017/10/27 02:32
2017/10/27 03:29
2017/10/28 22:00 編集
2017/10/29 05:39