Wypalanie zdarzenia klawiatury w JavaScript

Question

Próbuję zasymulować zdarzenie klawiatury w Safari przy użyciu JavaScript.

Próbowałem to:

var event = document.createEvent("KeyboardEvent"); 
event.initKeyboardEvent("keypress", true, true, null, false, false, false, false, 115, 0); 

... a także to:

var event = document.createEvent("UIEvents"); 
event.initUIEvent("keypress", true, true, window, 1); 
event.keyCode = 115; 

Po wypróbowaniu obu podejść, jednak mam ten sam problem: po kod został wykonany, właściwości obiektu zdarzenia są ustawione na 0, a nie na 115.

Czy ktoś wie, jak poprawnie utworzyć i wysłać wydarzenie na klawiaturze w Safari? (Wolałbym, aby osiągnąć go w zwykły JavaScript jeśli to możliwe).

Answer 1

Mozilla Developer Network zawiera następujące wyjaśnienie:

1. utworzyć wydarzenie za pomocą event = document.createEvent("KeyboardEvent")
2. Init w keyEvent

wykorzystaniem :

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

3. Dispatch the event użyciu yourElement.dispatchEvent(event)

nie widzę ostatni w kodzie, może to, co tracisz. Mam nadzieję, że to zadziała również w IE ...

Answer 2

Czy poprawnie wysłałeś to wydarzenie?

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

Jeśli używasz jQuery, można zrobić:

function simulateKeyPress(character) { 
    jQuery.event.trigger({ type : 'keypress', which : character.charCodeAt(0) }); 
} 

Answer 3

pracuję nad DOM Keyboard Event Level 3 polyfill. W najnowszych przeglądarek lub z tego PolyFill można zrobić coś takiego:

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:

Teraz moja polyfill obsługuje właściwości starszych "keyCode", "charCode" i "który"

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

Przykłady

Dodatkowo tutaj jest initKeyboardEvent w różnych wersjach językowych z mojej przeglądarki: (gist)

PolyFill demo

Answer 4

Jest to spowodowane bug w Webkit.

Możesz obejść błąd Webkita, używając createEvent('Event') zamiast createEvent('KeyboardEvent'), a następnie przypisując właściwość keyCode. Zobacz this answer i this example.

Answer 5

Nie jestem z tym dobry, ale KeyboardEvent => patrz KeyboardEvent jest inicjowany pod numerem initKeyEvent.
Oto przykład do emitowania zdarzenie na <input type="text" /> elementu

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