質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.76%

  • JavaScript

    15354questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

consoleから入力をする

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 305

moscow3

score 103

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

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/27 11:28

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

    キャンセル

  • 2017/10/27 11:32

    new KeyboardEvent(https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent/KeyboardEvent)でイベントを生成して、エレメントにdispatchEventする、という形になります。

    ただ、MDNのページを見ての通り、きちんとキーボードからの操作を再現するには、大量に引数を指定する必要があって、結構めんどくさいです。

    キャンセル

  • 2017/10/27 12:29

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

    キャンセル

  • 2017/10/29 06:59 編集

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

    キャンセル

  • 2017/10/29 14:39

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

    キャンセル

checkベストアンサー

+2

 EventTarget#dispatchEvent

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

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

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

 dispatchEvent の使い道

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

<input id="sample" type="text" name="sample" />
<script>
'use strict';
(function () {
  function handleKeypress (event) {
    console.log(event.key);
  }

  function fireKeypress (element, key) {
    element.value += key; // 該当要素ノードに key を入力する
    element.dispatchEvent(new KeyboardEvent('keypress', {key: key}));    // keypressイベントハンドラを発火する
  }

  function main () {
    var input = this.document.getElementById('sample');

    input.addEventListener('keypress', handleKeypress, false);

    fireKeypress(input, 'a'); // "a" を入力する
    fireKeypress(input, 'b'); // "b" を入力する
    fireKeypress(input, 'c'); // "c" を入力する
  }

  main.call(this);
}.call(this));
</script>

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

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

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

Re: moscow3 さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

入力フォームがあってもなくても、タイピングの練習サイトである以上は
入力されたコードを検知している場所があるはずなので
そこに対して情報を流せばできるのではないでしょうか。
(実際サイトを見て言っている訳ではないのであくまで予測ですが・・・)

もしくは、Seleniumなどのツールを使って、キー入力を覚えさせるか等でしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.76%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    15354questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。