Déclenchement d'un événement de clavier en JavaScript

Question

Je suis en train de simuler un événement de clavier en Safari à l'aide de JavaScript.

J'ai essayé ceci:

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

...et aussi ceci:

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

Après avoir essayé les deux approches, cependant, j'ai le même problème: une fois que le code a été exécuté, l' keyCode/which propriétés de l'objet d'événement sont définies à l' 0, pas 115.

Personne ne sait comment fiable pour créer et envoyer un événement de clavier dans Safari? (Je préfère la réaliser dans la plaine du JavaScript, si possible.)

Answer 1

Je suis en train de travailler sur DOM l'Événement de Clavier Niveau 3 polyfill . Dans les navigateurs les plus récents ou avec ce polyfill vous pouvez faire quelque chose comme ceci:

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

Mise à JOUR:

Maintenant, mon polyfill prend en charge l'héritage des propriétés "keyCode", "charCode" et "qui"

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

Des exemples ici

En outre, ici, est cross-browser initKeyboardEvent séparément de ma polyfill: (gist)

Polyfill démo

Answer 2

Avez-vous envoyé l'événement correctement?

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

Si vous utilisez jQuery, vous pouvez faire:

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

Answer 3

Ceci est dû à un bug dans Webkit.

Vous pouvez contourner le bogue Webkit en utilisant createEvent('Event') plutôt que createEvent('KeyboardEvent') , puis en affectant la propriété keyCode . Voir cette réponse et cet exemple .

Answer 4

Le Mozilla Developer Center fournit l'explication suivante:

1. Créer un événement à l'aide de document.createEvent("KeyboardEvent")

2. Init le keyevent à l'aide de

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

3. Envoi de l'événement

Je ne vois pas le dernier dans votre code, c'est peut-être ce que vous êtes absent. J'espère que cela fonctionne dans IE ainsi...