85

JavaScript を使用して Safari でキーボード イベントをシミュレートしようとしています。

私はこれを試しました：

var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 115, 0);

...そしてこれも：

var event = document.createEvent("UIEvents");
event.initUIEvent("keypress", true, true, window, 1);
event.keyCode = 115;

ただし、両方のアプローチを試した後、同じ問題があります。コードが実行された後、イベント オブジェクトのkeyCode/whichプロパティが0ではなくに設定され115ます。

Safariでキーボードイベントを確実に作成してディスパッチする方法を知っている人はいますか? (可能であれば、プレーンな JavaScript で実現したいと思います。)

4

5 に答える 5

45

私はDOM Keyboard Event Level 3 polyfillに取り組んでいます。最新のブラウザーまたはこのポリフィルを使用すると、次のようなことができます。

element.addEventListener("keydown", function(e){ console.log(e.key, e.char, e.keyCode) })

var e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, key : "Q", char : "Q", shiftKey : true});
element.dispatchEvent(e);

//If you need legacy property "keyCode"
// Note: In some browsers you can't overwrite "keyCode" property. (At least in Safari)
delete e.keyCode;
Object.defineProperty(e, "keyCode", {"value" : 666})

アップデート：

現在、ポリフィルはレガシー プロパティ「keyCode」、「charCode」、および「which」をサポートしています。

var e = new KeyboardEvent("keydown", {
    bubbles : true,
    cancelable : true,
    char : "Q",
    key : "q",
    shiftKey : true,
    keyCode : 81
});

例はこちら

さらに、ポリフィルとは別に、クロスブラウザーの initKeyboardEvent があります: (gist)

ポリフィルのデモ

于 2012-08-09T14:44:48.063 に答える
31

イベントを正しくディスパッチしましたか?

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

jQuery を使用する場合は、次のことができます。

function simulateKeyPress(character) {
  jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) });
}
于 2011-05-07T09:26:23.227 に答える
17

これはWebkitのバグによるものです。

createEvent('Event')ではなくを使用しcreateEvent('KeyboardEvent')てからプロパティを割り当てることで、Webkit のバグを回避できkeyCodeます。この回答とこの例を参照してください。

于 2013-01-22T21:43:28.230 に答える
8

Mozilla Developer Networkは、次の説明を提供します。

  1. を使用してイベントを作成するevent = document.createEvent("KeyboardEvent")
  2. キーイベントを開始する

使用:

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
       ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
           keyCodeArg, charCodeArg)
  1. を使用してイベントをディスパッチするyourElement.dispatchEvent(event)

あなたのコードに最後のものが表示されません。おそらくそれが不足しています。これがIEでも機能することを願っています...

于 2009-06-07T08:57:06.440 に答える
1

私はこれがあまり得意ではありませんが、KeyboardEvent=> KeyboardEvent が で初期化されていることを確認してくださいinitKeyEvent。要素
でイベントを発行する例を次に示します<input type="text" />

document.getElementById("txbox").addEventListener("keypress", function(e) {
  alert("Event " + e.type + " emitted!\nKey / Char Code: " + e.keyCode + " / " + e.charCode);
}, false);

document.getElementById("btn").addEventListener("click", function(e) {
  var doc = document.getElementById("txbox");
  var kEvent = document.createEvent("KeyboardEvent");
  kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74);
  doc.dispatchEvent(kEvent);
}, false);
<input id="txbox" type="text" value="" />
<input id="btn" type="button" value="CLICK TO EMIT KEYPRESS ON TEXTBOX" />

于 2015-02-15T12:48:44.547 に答える