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

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

您是否要执行已定义的代码或浏览器可以理解的某些键组合？如果是您自己的代码，则最好设置一个事件包装器，您可以通过“真实的”键盘界面或通过其他事件生成器调用该事件包装器，如此处所述。适当重构。

在这个例子中，我试图模拟用户按下“ s”。最终，我试图模拟用户在Apple Dashboard Widget中按下Command-R。

您的代码解决了我的问题:)

@ acidzombie24：我很高兴！ :)

模拟JavaScript关键事件的副本

#1 楼

我正在研究DOM键盘事件级别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})

UPDATE：

现在，我的polyfill支持旧版属性“ keyCode” ，“ charCode”和“哪一个”

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

此处的示例

另外，这里还有跨浏览器的initKeyboardEvent与我的polyfill分开：（要点）

Polyfill演示

似乎无法使用箭头或页面上/下键使可滚动区域向下滚动...

–迈克尔
15年4月16日在6:01

更改了jsfiddle以便在文本框而不是文档@ jsfiddle.net/vnathalye/yjc5F/974上调度事件。尽管它会触发按键处理程序，但文本不会显示在文本框中。任何想法？

– Vivek Athalye
17年1月18日在5:32

@termi您的演示链接已死

–塞巴斯蒂安
17年3月16日在11:16

更改输入（文本）元素的值似乎也不起作用。

–迈克尔
17年4月21日在23:44

Delete运算符的操作数不能是只读属性。

– Nircraft
18年11月28日在15:38

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

可以用这个来模拟控件+ C（复制快捷方式）吗？

– John John Pichler
13年1月22日在23:23

@claudiopro是的，您是正确的，应该是（evt.initKeyEvent || evt.initKeyboardEvent）.call（evt，//等等。

– tyronegcarter
14年2月18日在18:57

initKeyboardEvent在Chromium中也不起作用。 event.keyCode和event。which始终返回0。这是一个已知的错误，解决方法是使用常规事件var event = document.createEvent（'Event'）; event.initEvent（'keydown'，true，true）; event.keyCode = 76;

–lluft
15年1月6日在20:38

弃用票：已弃用initKeyEvent和initKeyboardEvent。

–КонстантинВан
17年7月7日在23:59

@ K._而不是拒绝先前起作用的答案，而是指出它已被弃用应该足以使每个人都抬起头来，而不会对tyronegcarter产生负面影响。这个答案stackoverflow.com/questions/961532/…使用现代的KeyboardEventdeveloper.mozilla.org/en-US/docs/Web/API/KeyboardEvent/…

–少一点
'18 Sep 6'在10:09

#3 楼

这是由于Webkit中的错误所致。

您可以使用createEvent('Event')而不是createEvent('KeyboardEvent')解决Webkit错误，然后分配keyCode属性。请参阅此答案和此示例。

#4 楼

Mozilla开发人员网络提供以下解释：

使用event = document.createEvent("KeyboardEvent")创建事件

使用以下命令初始化键事件

：

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

使用yourElement.dispatchEvent(event)发送事件

我在您的代码中看不到最后一个，也许这就是您所缺少的。我希望这也可以在IE中使用...

不幸的是，Mozilla的实现是非标准的。关于第3点，我的问题是创建正确的事件-在此之后发送事件。另外，由于我正在为Apple的Dashboard开发，所以我根本不必担心IE！（哇！）

–史蒂夫·哈里森（Steve Harrison）
09年6月8日在1:19

.initKeyEvent现在已弃用

–汉普·阿格伦
16年8月18日在19:56

#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" />

它显示js：21TypeError：kEvent.initKeyEvent不是函数。 Safari中的（在'kEvent.initKeyEvent（“ keypress”，true，true，null，false，false，false，false，74，74）'中，'kEvent.initKeyEvent'未定义）:(

–何一非何一非
2015年10月20日，11：50

应该是：var kEvent = document.createEvent（“ KeyboardEvent”）; kEvent.initKeyboardEvent（“ keypress”，true，true，null，false，false，false，false，74，74）; document.dispatchEvent（kEvent）;

–Любопытный
19年3月3日在4:16

编程黑洞网