キーを押すイベントをプログラムでシミュレートすることは可能ですか？

JavaScriptでプログラムによってキーを押すイベントをシミュレートすることは可能ですか？

webkitとgeckoの両方で機能する非jqueryバージョン：

var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

keyboardEvent[initMethod](
  "keydown", // event type: keydown, keyup, keypress
  true,      // bubbles
  true,      // cancelable
  window,    // view: should be window
  false,     // ctrlKey
  false,     // altKey
  false,     // shiftKey
  false,     // metaKey
  40,        // keyCode: unsigned long - the virtual key code, else 0
  0          // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(keyboardEvent);

jQuery 1.3.1を使用してもよい場合：

function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}

$(function() {
  $('body').keypress(function(e) {
    alert(e.which);
  });

  simulateKeyPress("e");
});

あなたができることは、keyeventsを発生させることによってプログラムでkeyeventリスナーをトリガーすることです。サンドボックス化されたセキュリティの観点からこれを許可することは理にかなっています。この機能を使用して、典型的なオブザーバーパターンを適用できます。このメソッドを「シミュレーション」と呼ぶことができます。

以下は、jQueryと共にW3C DOM標準でこれを実現する方法の例です。

function triggerClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.querySelector('input[type=submit][name=btnK]'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // preventDefault was called and the event cancelled
  } else {
    // insert your event-logic here...
  }
}

この例は、https：//developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_eventsから採用されています。

jQueryの場合：

jQuery('input[type=submit][name=btnK]')
  .trigger({
    type: 'keypress',
    which: character.charCodeAt(0 /*the key to trigger*/)      
   });

しかし最近では、ブラウザのサンドボックスを離れるキーイベントを実際にトリガーする[DOM]方法はありません。そして、すべての主要なブラウザベンダーは、そのセキュリティコンセプトを遵守します。

NPAPIに基づくAdobe Flashなどのプラグインについては、サンドボックスのバイパスを許可します。これらは段階的に廃止されます。Firefox。

詳細な説明：

（Pekkaが既に指摘したように）セキュリティ上の理由から、これを行うことはできません。その間は常にユーザーの操作が必要になります。さらに、さまざまなプログラムによるキーボードイベントがなりすまし攻撃につながっているため、ブラウザーベンダーがユーザーに訴えられる可能性を想像してください。

代替案と詳細については、この投稿を参照してください。フラッシュベースのコピーアンドペーストは常に存在します。これはエレガントな 例です。同時に、ウェブがプラグインベンダーから遠ざかっているのは証言です。

プログラムでリモートコンテンツにアクセスするオプトインCORSポリシーの場合にも、同様のセキュリティマインドセットが適用されます。

答えは
、通常の状況では、サンドボックス化されたブラウザ環境でプログラムによって入力キーをトリガーする方法はありません。

結論：私は、ゲームの最終目標または同様のユーザーエクスペリエンスに向けた特別なブラウザーモードおよび/または特権の下では、将来的にそれが不可能になるとは言っていません。ただし、そのようなモードに入る前に、ユーザーはフルスクリーンAPIモデルと同様に、権限とリスクを求められます。

便利： KeyCodesのコンテキストでは、このツールとキーコードのマッピングが便利です。

開示：答えはここの答えに基づいています。

このような要素でキーボードイベントをディスパッチできます

element.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

使用できますdispatchEvent()：

function simulateKeyPress() {
  var evt = document.createEvent("KeyboardEvent");
  evt.initKeyboardEvent("keypress", true, true, window,
                    0, 0, 0, 0,
                    0, "e".charCodeAt(0))
  var body = document.body;
  var canceled = !body.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

私はこれをテストしませんでしたが、dispatchEvent（）のドキュメントのコードから採用されました。あなたはおそらくそれを読み通したいと思うでしょうし、createEvent（）とinitKeyEvent（）のドキュメントも読むでしょう。

キーボードイベントを作成してディスパッチすることができ、適切な登録済みイベントハンドラーをトリガーしますが、たとえばinput要素にディスパッチされた場合、テキストは生成されません。

テキスト入力を完全にシミュレートするには、キーボードイベントのシーケンスを生成し、さらに入力要素のテキストを明示的に設定する必要があります。イベントのシーケンスは、テキスト入力をどの程度徹底的にシミュレートするかによって異なります。

最も単純な形式は次のとおりです。

$('input').val('123');
$('input').change();

keypressイベントによっては、必要な機能を提供できない場合があります。mozilla docsから、この機能が廃止されていることがわかります。

この機能は推奨されなくなりました。一部のブラウザーはまだそれをサポートしている可能性がありますが、関連するWeb標準から既に削除されているか、削除中か、互換性のためにのみ保持されている可能性があります。使用を避け、可能であれば既存のコードを更新してください。このページの下部にある互換性の表を参照して、決定を行ってください。この機能はいつでも機能しなくなる可能性があることに注意してください。

したがって、keypressイベントは2つの結果として発生したイベントから結合され、同じキーに対してkeydown次のイベントが続くkeyupため、イベントを1つずつ生成します。

element.dispatchEvent(new KeyboardEvent('keydown',{'key':'Shift'}));
element.dispatchEvent(new KeyboardEvent('keyup',{'key':'Shift'}));

alex2k8からの回答に基づいて、jQueryがサポートするすべてのブラウザーで機能する改訂版を次に示します（問題は、jQuery.event.triggerへの引数が欠落しており、内部関数を使用するときに忘れがちです）。

// jQuery plugin. Called on a jQuery object, not directly.
jQuery.fn.simulateKeyPress = function (character) {
  // Internally calls jQuery.event.trigger with arguments (Event, data, elem).
  // That last argument, 'elem', is very important!
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};

jQuery(function ($) {
  // Bind event handler
  $('body').keypress(function (e) {
    alert(String.fromCharCode(e.which));
    console.log(e);
  });
  // Simulate the key press
  $('body').simulateKeyPress('x');
});

これをさらにプッシュして、イベントをシミュレートするだけでなく、実際に文字（入力要素の場合）を挿入することもできますが、それを実行しようとすると、多くのクロスブラウザの問題があります。SendKeysのようなより手の込んだプラグインを使用するほうがよい。

2019年の時点で、このソリューションは私にとってうまくいきました：

document.dispatchEvent(
  new KeyboardEvent("keydown", {
    key: "e",
    keyCode: 69, // example values.
    code: "KeyE", // put everything you need in this object.
    which: 69,
    shiftKey: false, // you don't need to include values
    ctrlKey: false,  // if you aren't going to use them.
    metaKey: false   // these are here for example's sake.
  })
);

シミュレートされたキーパッドを備えたモバイルデバイスをサポートするために、ブラウザーゲームでこれを使用しました。

明確化：このコードは単一のkeydownイベントをディスパッチしますが、実際のキーを押すと1つのkeydownイベント（またはそれが長く保持されている場合は複数のイベント）をトリガーし、keyupそのキーを離すと1つのイベントをトリガーします。keyupイベントも必要な場合は、コードスニペットをにkeyup変更する"keydown"こと"keyup"でイベントをシミュレートすることもできます。

これにより、Webページ全体、つまりにイベントが送信されますdocument。特定の要素のみがイベントを受け取るようにしたい場合documentは、目的の要素の代わりに使用できます。

興味のある方は、キーボード入力イベントを確実に再現できます。入力領域のテキストを変更する（カーソルを移動する、または入力文字を介してページを表示する）には、DOMイベントモデルに厳密に従う必要があります。http：//www.w3.org/TR/DOM-Level-3-Events/ ＃h4_events-inputevents

モデルは次のことを行う必要があります。

• フォーカス（ターゲットセットを持つDOMにディスパッチされます）

次に、各文字について：

• キーダウン（DOMでディスパッチ）
• beforeinput（テキストエリアまたは入力の場合、ターゲットでディスパッチされます）
• キープレス（DOM上でディスパッチされます）
• 入力（テキストエリアまたは入力の場合、ターゲットでディスパッチされます）
• 変更（選択した場合、ターゲットでディスパッチされます）
• キーアップ（DOMでディスパッチ）

次に、オプションでほとんどの場合：

• ぼかし（ターゲットが設定されたDOMでディスパッチされます）

これは実際にJavaScriptを介して（値ステートメントを変更せずに）ページのテキストを変更し、JavaScriptリスナー/ハンドラーを適切に開始します。シーケンスを台無しにした場合、JavaScriptは適切な順序で起動しません。入力ボックスのテキストは変更されません。選択は変更されません。または、カーソルがテキスト領域の次のスペースに移動しません。

残念ながら、このコードはNDAの下の雇用主向けに書かれたため、共有することはできませんが、確かに可能ですが、各要素のキー入力「スタック」全体を正しい順序で再作成する必要があります。

このアプローチは、ブラウザ間のキーコードの値の変更をサポートします。 ソース

var $textBox = $("#myTextBox");

var press = jQuery.Event("keypress");
press.altGraphKey = false;
press.altKey = false;
press.bubbles = true;
press.cancelBubble = false;
press.cancelable = true;
press.charCode = 13;
press.clipboardData = undefined;
press.ctrlKey = false;
press.currentTarget = $textBox[0];
press.defaultPrevented = false;
press.detail = 0;
press.eventPhase = 2;
press.keyCode = 13;
press.keyIdentifier = "";
press.keyLocation = 0;
press.layerX = 0;
press.layerY = 0;
press.metaKey = false;
press.pageX = 0;
press.pageY = 0;
press.returnValue = true;
press.shiftKey = false;
press.srcElement = $textBox[0];
press.target = $textBox[0];
press.type = "keypress";
press.view = Window;
press.which = 13;

$textBox.trigger(press);

CustomEventを使用するだけです

Node.prototype.fire=function(type,options){
     var event=new CustomEvent(type);
     for(var p in options){
         event[p]=options[p];
     }
     this.dispatchEvent(event);
}

4例：ctrl + zをシミュレートしたい

window.addEventListener("keyup",function(ev){
     if(ev.ctrlKey && ev.keyCode === 90) console.log(ev); // or do smth
     })

 document.fire("keyup",{ctrlKey:true,keyCode:90,bubbles:true})

これは本当に役立つライブラリです：https : //cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

どこから来たのかはわかりませんが、役に立ちました。これは、追加.simulate()する方法をwindow.KeyEventあなたが単にそれを使用して、KeyEvent.simulate(0, 13)シミュレートするenterかKeyEvent.simulate(81, 81)のために'Q'。

https://github.com/ccampbell/mousetrap/tree/master/testsで入手しました。

これは私にとってはうまくいき、私のtextaeraのキーアップをシミュレートします。あなたはページ全体のためにそれをしたい場合は、単に置くKeySimulation()に<body>このような<body onmousemove="KeySimulation()">かどうonmousemoveその後、onmouseoverまたはonload著作すぎ。

<script>
function KeySimulation()
{
var e = document.createEvent("KeyboardEvent");
if (e.initKeyboardEvent) {  // Chrome, IE
    e.initKeyboardEvent("keyup", true, true, document.defaultView, "Enter", 0, "", false, "");
} else { // FireFox
    e.initKeyEvent("keyup", true, true, document.defaultView, false, false, false, false, 13, 0);
}
document.getElementById("MyTextArea").dispatchEvent(e);
}
</script>

<input type="button" onclick="KeySimulation();" value=" Key Simulation " />
<textarea id="MyTextArea" rows="15" cols="30"></textarea>

コンソールコンテキストでの使用が簡単なため、1列に1列でした。しかし、おそらくまだ役に立ちます。

    var pressthiskey = "q"/* <-- q for example */;
    var e = new Event("keydown");
    e.key = pressthiskey;
    e.keyCode = e.key.charCodeAt(0);
    e.which = e.keyCode;
    e.altKey = false;
    e.ctrlKey = true;
    e.shiftKey = false;
    e.metaKey = false;
    e.bubbles = true;
    document.dispatchEvent(e);

ChromeとChromiumで機能するソリューションを次に示します（これらのプラットフォームのみをテストしました）。Chromeにはキーコードを処理するためのバグまたは独自のアプローチがあるため、このプロパティをKeyboardEventに個別に追加する必要があります。

function simulateKeydown (keycode,isCtrl,isAlt,isShift){
    var e = new KeyboardEvent( "keydown", { bubbles:true, cancelable:true, char:String.fromCharCode(keycode), key:String.fromCharCode(keycode), shiftKey:isShift, ctrlKey:isCtrl, altKey:isAlt } );
    Object.defineProperty(e, 'keyCode', {get : function() { return this.keyCodeVal; } });     
    e.keyCodeVal = keycode;
    document.dispatchEvent(e);
}

これは私が何とか見つけたものです：

function createKeyboardEvent(name, key, altKey, ctrlKey, shiftKey, metaKey, bubbles) {
  var e = new Event(name)
  e.key = key
  e.keyCode = e.key.charCodeAt(0)
  e.which = e.keyCode
  e.altKey = altKey
  e.ctrlKey = ctrlKey
  e.shiftKey = shiftKey
  e.metaKey =  metaKey
  e.bubbles = bubbles
  return e
}

var name = 'keydown'
var key = 'a'

var event = createKeyboardEvent(name, key, false, false, false, false, true)

document.addEventListener(name, () => {})
document.dispatchEvent(event)

TypeScriptをサポートするネイティブJavaScriptソリューション：

keyCodeまたは使用しているプロパティを入力し、KeyboardEventInitにキャストします。

例

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);

それは私がクロムでjs / typescriptで試したものです。インスピレーションを与えてくれたこの回答に感謝し ます。

const x = document.querySelector('input');

const keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
Object.defineProperty(keyboardEvent, "charCode", {
  get() {
    return 13;
  },
});
x.dispatchEvent(keyboardEvent);

ユーザーが問題のキーを押すとすぐに、そのキーへの参照を保存して、他のHTML要素で使用できます。

EnterKeyPressToEmulate<input class="lineEditInput" id="addr333_1" type="text" style="width:60%;right:0%;float:right" onkeydown="keyPressRecorder(event)"></input>
TypeHereToEmulateKeyPress<input class="lineEditInput" id="addr333_2" type="text" style="width:60%;right:0%;float:right" onkeydown="triggerKeyPressOnNextSiblingFromWithinKeyPress(event)">
Itappears Here Too<input class="lineEditInput" id="addr333_3" type="text" style="width:60%;right:0%;float:right;" onkeydown="keyPressHandler(event)">
<script>
var gZeroEvent;
function keyPressRecorder(e)
{
  gZeroEvent = e;
}
function triggerKeyPressOnNextSiblingFromWithinKeyPress(TTT)
{
  if(typeof(gZeroEvent) != 'undefined')  {
TTT.currentTarget.nextElementSibling.dispatchEvent(gZeroEvent);
keyPressHandler(TTT);
  }
}
function keyPressHandler(TTT)
{
  if(typeof(gZeroEvent) != 'undefined')  {
TTT.currentTarget.value+= gZeroEvent.key;
event.preventDefault();
event.stopPropagation();
  }
}
</script>

独自のイベントを作成する場合は、keyCodeを設定できます。実際のキーボードイベントから既存のパラメーターをコピーできます（dispatchEventのジョブなのでターゲットは無視されます）。

ta = new KeyboardEvent('keypress',{ctrlKey:true,key:'Escape'})

私は質問がキープレスをシミュレートするJavaScriptの方法を求めていることを知っています。しかし、jQueryの方法で何かを探している人のために：

var e = jQuery.Event("keypress");
e.which = 13 //or e.keyCode = 13 that simulates an <ENTER>
$("#element_id").trigger(e); 

これを機能させるための重要な部分はcharCode、keyCodeそれを実現することであり、whichこれらはすべて非推奨のメソッドです。したがって、キープレスイベントを処理するコードがこれら3つのうちのいずれかを使用している場合、偽の応答（たとえば、デフォルトの0）を受け取ります。

などの廃止されていないメソッドを使用してキープレスイベントにアクセスする限りkey、問題はありません。

完了のために、イベントをトリガーするための基本的なJavaScriptコードを追加しました。

const rightArrowKey = 39
const event = new KeyboardEvent('keydown',{'key':rightArrowKey})
document.dispatchEvent(event)

「タブ」プレスをシミュレートしたかった...トレバーの答えを拡張すると、「タブ」のような特別なキーが押されているのがわかりますが、「タブ」プレスの実際の結果はわかりません。 。

「activeElement」のこれらのイベントとグローバルドキュメントオブジェクトの両方をディスパッチしてみました-両方のコードを以下に追加しました。

以下のスニペット：

var element = document.getElementById("firstInput");

document.addEventListener("keydown", function(event) {

  console.log('we got key:', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);

  /* enter is pressed */
  if (event.keyCode == 13) {
    console.log('enter pressed:', event);

    setTimeout(function() {
      /*  event.keyCode = 13;  event.target.value += 'b';  */

      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
    }, 4);

    setTimeout(function() {
      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
    }, 100);



  } else if (event.keyCode != 0) {
    console.log('we got a non-enter press...: :', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);
  }

});

<h2>convert each enter to a tab in JavaScript... check console for output</h2>
<h3>we dispatchEvents on the activeElement... and the global element as well</h3>

<input type='text' id='firstInput' />
<input type='text' id='secondInput' />

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
    Click me to display Date and Time.</button>
<p id="demo"></p>