491

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

4

24 に答える 24

220

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);

于 2012-08-29T22:18:11.157 に答える
79

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");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js">
</script>

于 2009-02-27T20:36:55.923 に答える
59

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

以下は、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] 方法はありません。また、すべての主要なブラウザー ベンダーは、そのセキュリティの概念を順守します。

Adobe Flash などのプラグイン (NPAPI に基づいており、サンドボックスのバイパスを許可するもの) については、これらは段階的に廃止されています。ファイアフォックス.

詳細な説明:

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

代替案と詳細については、この投稿を参照してください。常にフラッシュ ベースのコピー アンド ペーストがあります。これはエレガントな 例です。同時に、これは Web がプラグイン ベンダーから離れつつある理由の証でもあります。

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

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

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

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

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

于 2013-11-09T22:20:29.583 に答える
39

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特定の要素だけがイベントを受信するようにする場合は、目的の要素を置き換えることができます。

于 2019-11-30T04:20:59.747 に答える
29

あなたが使用することができます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（）のドキュメントを読み通したいと思うでしょう。

于 2009-05-08T12:44:24.403 に答える
15

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のようなより精巧なプラグインを使用することをお勧めします。

于 2011-10-02T15:11:25.297 に答える
2

TypeScript 対応のネイティブ JavaScript ソリューション:

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

例

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

于 2019-07-15T22:14:09.093 に答える
2

それが私がクロムでjs/typescriptで試したことです。インスピレーションを得るためのこの回答に感謝し ます。

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

var keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
// you can try charCode or keyCode but they are deprecated
Object.defineProperty(keyboardEvent, "key", {
  get() {
    return "Enter";
  },
});
x.dispatchEvent(keyboardEvent);


{
  // example
  document.querySelector('input').addEventListener("keypress", e => console.log("keypress", e.key))
  // unfortunatelly doesn't trigger submit
  document.querySelector('form').addEventListener("submit", e => {
    e.preventDefault();
    console.log("submit")
  })
}

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

var keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
// you can try charCode or keyCode but they are deprecated
Object.defineProperty(keyboardEvent, "key", {
  get() {
    return "Enter";
  },
});
x.dispatchEvent(keyboardEvent);
<form>
  <input>
</form>

于 2020-02-26T19:13:00.313 に答える
1

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

var e = jQuery.Event("keypress");
e.which = 13 //or e.keyCode = 13 that simulates an <ENTER>
$("#element_id").trigger(e);
于 2019-03-11T13:30:53.830 に答える