2009-06-07 403 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" />