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


79

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


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

1
在这个例子中,我试图模拟用户按下“ s”。最终,我试图模拟用户在Apple Dashboard Widget中按下Command-R。
史蒂夫·哈里森

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

@ acidzombie24:我很高兴!:)
史蒂夫·哈里森

Answers:


43

我正在研究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})

更新:

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

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

这里的例子

另外,这是跨浏览器的initKeyboardEvent与我的polyfill分开的:(要点)

Polyfill演示


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

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

1
@termi您的演示链接已死
塞巴斯蒂安

更改输入(文本)元素的值似乎也不起作用。
Michael

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

30

您是否正确调度了事件?

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

3
可以用这个来模拟控件+ C(复制快捷方式)吗?
John John Pichler 2013年

1
@claudiopro是的,您是正确的(evt.initKeyEvent || evt.initKeyboardEvent).call(evt, // etc.
tyronegcarter 2014年

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

5
不推荐使用initKeyEventinitKeyboardEvent弃用
59КонстантинВан

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

17

这是由于Webkit中的错误

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


8

Mozilla开发者网络提供了以下解释:

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

使用:

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
       ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
           keyCodeArg, charCodeArg)
  1. 使用发送事件yourElement.dispatchEvent(event)

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


2
不幸的是,Mozilla的实现是非标准的。关于第3点,我的问题是创建正确的事件-在此之后发送事件。另外,由于我正在为Apple的Dashboard开发,所以我根本不必担心IE!(呼!)
史蒂夫·哈里森

4
.initKeyEvent现在已弃用
汉普斯·阿赫格伦

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


7
它显示js:21TypeError: kEvent.initKeyEvent is not a function. (In 'kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 74, 74)', 'kEvent.initKeyEvent' is undefined)在safari中:(
He Yifei何一非2015年

应该是:var kEvent = document.createEvent(“ KeyboardEvent”); kEvent.initKeyboardEvent(“ keypress”,true,true,null,false,false,false,false,74,74); document.dispatchEvent(kEvent);
Любопытный
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.