javascript - quitar - devtools

Keydown Simulation en Chrome dispara normalmente pero no la clave correcta

Question

Quiero simular eventos de keydown en un elemento textarea dado en una página html. Como initKeyboardEvent Chrome, llamé a initKeyboardEvent sobre mi variable y pasé el código clave que deseo escribir en el área de texto. Esto es lo que intenté:

var keyEvent = document.createEvent(''KeyboardEvent'');
keyEvent.initKeyboardEvent(''keydown'', true, false, null, 0, false, 0, false, 77, 0);
inputNode.dispatchEvent(keyEvent);

En este código estoy escribiendo la letra m sin embargo, el área de texto solo está obteniendo el código 13 clave 13 que es la tecla Enter . Entonces, probé un código de anulación que vi en línea que establece el valor de keyCodeVal, pero sin éxito

var keyEvent = document.createEvent(''KeyboardEvent'');
Object.defineProperty(keyEvent, ''keyCode'', { 
                         get : function() {
                                 return this.keyCodeVal;
                         }
                        });
keyEvent.initKeyboardEvent(''keydown'', true, false, null, 0, false, 0, false, 77, 0);
keyEvent.keyCodeVal = 77;
inputNode.dispatchEvent(keyEvent);

¿Alguien tiene una idea de cómo establecer el valor del código clave?

Answer 1

Bueno, las soluciones anteriores funcionaron, también gracias a @dland para la sugerencia de parámetro. Aquí hay algo que encontré útil, si no puede hacer que los eventos se disparen en el lugar correcto.

La secuencia de comandos de @Orwellophile activa el evento en el documento. Es posible que el detector de eventos no siempre esté registrado en el document . Cambié la última línea a siguiente y ahora prácticamente funciona.

document.activeElement.dispatchEvent(oEvent);

document.activeElement siempre activa el evento en el elemento donde el usuario se está enfocando actualmente.

Answer 2

La solución de Orwellophile funciona.

• Primero: ''keyCode'', ''charCode'' y ''which'' son solo de lectura en Safari e IE9 + (al menos).
• Segundo: initKeyboardEvent es un poco complicado. Todos los navegadores lo implementan de una manera diferente. Incluso en webkit hay varias implementaciones diferentes de initKeyboardEvent. Y no hay una "buena" manera de iniciar el eventoKeyboardEvent en Opera.
• Tercero: initKeyboardEvent está en desuso. Necesita usar el constructor initKeyEvent o KeyboardEvent.

Aquí escribí una función initKeyboardEvent de cross-browser (gist ):

Ejemplo:

var a = window.crossBrowser_initKeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
alert(a.type + " | " + a.key + " | " + a.char + " | " + a.shiftKey)

Y aquí está mi DOM Keyboard Event Level 3 polyfill con cross-browser KeyboardEvent constructor.

Ejemplo:

var a = new KeyboardEvent("keypress", {"key": 1, "char": "!", shiftKey: true})
alert(a.type + " | " + a.key + " | " + a.char + " | " + a.shiftKey)

Ejemplo 2

Ejemplo 3

Nota importante 1: charCode, keyCode y qué propiedades están en desuso. Por lo tanto, ni mi crossBrowser_initKeyboardEvent ni KeyboardEvent constructor tienen garantizados valores correctos de esas propiedades en algunos navegadores. Puede utilizar las propiedades "clave" y "char" en su lugar o editar mi idea para forzar el uso de initEvent en los navegadores con solo lectura de código de carbono, código de clave y qué propiedades.

Nota importante 2: el evento de pulsación de teclas está en desuso y, por ahora, no está admitido en mi Polyfill Event Level 3 polyfill . Eso quiere decir que las propiedades key y char en el evento keypress pueden tener valores aleatorios. Estoy trabajando para solucionar ese problema con la compatibilidad con versiones anteriores.

Answer 3

Muy muy cerca ...

Solo necesitas anular la propiedad ''which''. Aquí hay un código de muestra:

Podium = {};
Podium.keydown = function(k) {
    var oEvent = document.createEvent(''KeyboardEvent'');

    // Chromium Hack
    Object.defineProperty(oEvent, ''keyCode'', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     
    Object.defineProperty(oEvent, ''which'', {
                get : function() {
                    return this.keyCodeVal;
                }
    });     

    if (oEvent.initKeyboardEvent) {
        oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, false, false, false, false, k, k);
    } else {
        oEvent.initKeyEvent("keydown", true, true, document.defaultView, false, false, false, false, k, 0);
    }

    oEvent.keyCodeVal = k;

    if (oEvent.keyCode !== k) {
        alert("keyCode mismatch " + oEvent.keyCode + "(" + oEvent.which + ")");
    }

    document.dispatchEvent(oEvent);
}

Uso de muestra:

Podium.keydown(65);

Nota: este código no está diseñado para funcionar en IE, Safari u otros navegadores. Bueno, tal vez con Firefox. YMMV.

Answer 4

Para que el guión de @Orwellophile funcione en Google Chrome 26.0.1410.65 (en Mac OS X 10.7.5, si eso importa), tuve que cambiar una línea: su script parece tener los initKeyboardEvent de initKeyboardEvent en un orden diferente al Documentación de MDN para initKeyboardEvent .

La línea cambiada se ve así:

oEvent.initKeyboardEvent("keydown", true, true, document.defaultView, k, k, "", "", false, "");

Answer 5

Todas las soluciones anteriores funcionan, pero he encontrado un caso que no lo harán.

Si se usa Dart, el código Dart que usa KeyboardEvents no funcionará en un evento general.

Obtendrás algo como get $ keyCode no definido.

después de golpearme la cabeza durante horas en esto, he encontrado el siguiente truco:

function __triggerKeyboardEvent(el, keyCode)
{
   var eventObj = document.createEventObject ?
       document.createEventObject() : document.createEvent("Events");

   var tempKeyboardObj = document.createEvent("KeyboardEvents");

   if(eventObj.initEvent){
      eventObj.initEvent("keydown", true, true);
   }
   eventObj.___dart_dispatch_record_ZxYxX_0_ = tempKeyboardObj.___dart_dispatch_record_ZxYxX_0_
   eventObj.keyCode = keyCode;
   eventObj.which = keyCode;

   el.dispatchEvent ? el.dispatchEvent(eventObj) : el.fireEvent("onkeydown", eventObj);

} 

El interceptor de Dart Fooling para hacer que nuestro evento sea en realidad un evento KeyboardEvent, hizo el truco.

Dejándolo aquí, para el pobre tipo que está tratando de probar la aplicación Dart en un navegador basado en webkit.