2009-06-07 322 views
61

我试图在Safari中使用JavaScript来模拟键盘事件。在JavaScript中触发键盘事件

我已经试过这样:

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

+0

在发射事件的例子你们是不是要执行你定义的代码或一些组合键的浏览器理解?如果是自己的代码,最好设置一个事件包装器,您可以通过“真实”键盘界面或通过其他事件生成器调用事件包装器,如您在此处所述。适当重构。 – Nolte 2009-06-07 08:55:52

+1

在这个例子中,我试图模拟用户按“s”。最终,我试图模拟用户在Apple Dashboard Widget中按下Command-R。 – 2009-06-07 09:08:31

+2

你的代码解决了我的问题:) – 2011-01-18 14:45:18

回答

6

Mozilla Developer Network提供了以下解释:

  1. 创建使用event = document.createEvent("KeyboardEvent")
  2. 初始化使用该KeyEvent

事件:

event.initKeyEvent (type, bubbles, cancelable, viewArg, 
     ctrlKeyArg, altKeyArg, shiftKeyArg, metaKeyArg, 
      keyCodeArg, charCodeArg) 
  1. Dispatch the event使用yourElement.dispatchEvent(event)

我没有看到你的代码的最后一个,也许这就是你错过了什么。我希望这在IE以及...

28

你发送正确的事件?

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

我上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}) 

UPDATE:

现在我的填充工具支持原有属性“键代码”,“则charCode”和“其中”

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

示例here

此外,这里是跨浏览器initKeyboardEvent与我的polyfill分开:(gist)

填充工具demo

14

这是由于在一个的Webkit bug

您可以使用createEvent('Event')而不是createEvent('KeyboardEvent')来解决Webkit bug,然后分配keyCode属性。见this answerthis example

1

我不是非常好,这一点,但KeyboardEvent =“看KeyboardEventinitKeyEvent初始化。
这里是<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" />