teclado - lista de eventos javascript

Disparar un evento de teclado en JavaScript

Question

Estoy intentando simular un evento de teclado en Safari usando JavaScript.

He intentado esto:

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

... y también esto:

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

Sin embargo, después de probar ambos enfoques, tengo el mismo problema: después de que se ha ejecutado el código, el código keyCode / which propiedades del objeto del evento se establecen en 0 , no en 115 .

¿Alguien sabe cómo crear y enviar de forma confiable un evento de teclado en Safari? (Prefiero lograrlo en JavaScript si es posible).

Answer 1

¿Despachó el evento correctamente?

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 usas jQuery, podrías hacer:

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

Answer 2

Esto se debe a un bug en Webkit.

Puede createEvent(''Event'') error de Webkit utilizando createEvent(''Event'') lugar de createEvent(''KeyboardEvent'') , y luego asignar la propiedad keyCode . Vea esta respuesta y este ejemplo .

Answer 3

Estoy trabajando en DOM Keyboard Event Level 3 polyfill . En los últimos navegadores o con este polyfill puedes hacer algo como esto:

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

ACTUALIZAR:

Ahora mi polyfill admite las propiedades heredadas "keyCode", "charCode" y "which"

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

Ejemplos here

Además aquí está el navegador cruzado initKeyboardEvent separado de mi polyfill: (gist)

demo Polyfill

Answer 4

La Red de desarrolladores de Mozilla proporciona la siguiente explicación:

1. Cree un evento usando event = document.createEvent("KeyboardEvent")
2. Inicia el keyevent

utilizando:

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

3. Despachar el evento con yourElement.dispatchEvent(event)

No veo el último en tu código, quizás eso es lo que te estás perdiendo. Espero que esto funcione en IE también ...

Answer 5

No soy muy bueno con esto, pero KeyboardEvent => ver KeyboardEvent se inicializa con initKeyEvent .
Aquí hay un ejemplo para emitir evento en el elemento <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" />