使用 JavaScript 在 Safari 中触发键盘事件

Question

我正在尝试使用 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 来实现它。）

Answer 1

我正在处理 DOM Keyboard Event Level 3 polyfill 。在最新的浏览器中或者使用这个 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})

更新：

现在我的 polyfill 支持旧属性“keyCode”、“charCode”和“which”

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

例子here

另外，这里是与我的 polyfill 分开的跨浏览器 initKeyboardEvent：(gist)

Polyfill demo

Answer 2

您是否正确分派了事件？

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

Answer 3

这是由于 Webkit 中的 bug。

您可以使用createEvent('Event') 而不是createEvent('KeyboardEvent') 来解决Webkit 错误，然后分配keyCode 属性。请参阅this answer 和this example。

Answer 4

Mozilla Developer Network 提供以下解释：

1. 使用event = document.createEvent("KeyboardEvent") 创建事件
2. 初始化关键事件

使用：

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
       ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
           keyCodeArg, charCodeArg)

1. Dispatch the event 使用 yourElement.dispatchEvent(event)

我没有看到您代码中的最后一个，也许这就是您所缺少的。我希望这也适用于 IE...

Answer 5

我不太擅长这个，但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" />