¿Es posible simular eventos de pulsación de teclas mediante programación?

¿Es posible simular eventos de pulsación de teclas mediante programación en JavaScript?

Una versión no jquery que funciona tanto en webkit como en gecko:

var keyboardEvent = document.createEvent("KeyboardEvent");
var initMethod = typeof keyboardEvent.initKeyboardEvent !== 'undefined' ? "initKeyboardEvent" : "initKeyEvent";

keyboardEvent[initMethod](
  "keydown", // event type: keydown, keyup, keypress
  true,      // bubbles
  true,      // cancelable
  window,    // view: should be window
  false,     // ctrlKey
  false,     // altKey
  false,     // shiftKey
  false,     // metaKey
  40,        // keyCode: unsigned long - the virtual key code, else 0
  0          // charCode: unsigned long - the Unicode character associated with the depressed key, else 0
);
document.dispatchEvent(keyboardEvent);

Si está bien usar jQuery 1.3.1:

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

$(function() {
  $('body').keypress(function(e) {
    alert(e.which);
  });

  simulateKeyPress("e");
});

Lo que puede hacer es activar mediante programación los oyentes keyevent disparando eventos keyevent . Tiene sentido permitir esto desde una perspectiva de seguridad de espacio aislado. Con esta habilidad, puede aplicar un patrón típico de observador . Podría llamar a este método "simulación".

A continuación se muestra un ejemplo de cómo lograr esto en el estándar W3C DOM junto con jQuery:

function triggerClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.querySelector('input[type=submit][name=btnK]'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // preventDefault was called and the event cancelled
  } else {
    // insert your event-logic here...
  }
}

Este ejemplo está adaptado de: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

En jQuery:

jQuery('input[type=submit][name=btnK]')
  .trigger({
    type: 'keypress',
    which: character.charCodeAt(0 /*the key to trigger*/)      
   });

Pero a partir de hace poco, no existe una forma [DOM] de desencadenar eventos clave que abandonan el entorno limitado del navegador. Y todos los principales proveedores de navegadores se adherirán a ese concepto de seguridad.

En cuanto a los complementos como Adobe Flash, que se basan en el NPAPI, y permiten pasar por alto el sandbox: estos están desapareciendo gradualmente ; Firefox .

Explicación detallada:

No puede y no debe por razones de seguridad (como Pekka ya señaló). Siempre necesitará una interacción del usuario en el medio. Además, imagine la posibilidad de que los proveedores de navegadores sean demandados por los usuarios, ya que varios eventos de teclado programáticos han llevado a ataques de suplantación de identidad.

Vea esta publicación para alternativas y más detalles. Siempre existe el flash basado en copiar y pegar. Aquí hay un ejemplo elegante . Al mismo tiempo, es un testimonio de por qué la web se está alejando de los proveedores de complementos.

Existe una mentalidad de seguridad similar aplicada en el caso de la política opcional de CORS para acceder al contenido remoto mediante programación.

La respuesta es:
no hay forma de activar las teclas de entrada mediante programación en el entorno del navegador de espacio aislado en circunstancias normales .

En pocas palabras : no estoy diciendo que no será posible en el futuro, bajo modos especiales de navegador y / o privilegios hacia el objetivo final de los juegos, o experiencias de usuario similares. Sin embargo, antes de ingresar a tales modos, se le solicitará al usuario permisos y riesgos, similar al modelo de API de pantalla completa .

Útil: en el contexto de KeyCodes, esta herramienta y el mapeo de códigos clave serán útiles.

Divulgación: la respuesta se basa en la respuesta aquí .

Puede enviar eventos de teclado en un elemento como este

element.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));

Puedes usar dispatchEvent():

function simulateKeyPress() {
  var evt = document.createEvent("KeyboardEvent");
  evt.initKeyboardEvent("keypress", true, true, window,
                    0, 0, 0, 0,
                    0, "e".charCodeAt(0))
  var body = document.body;
  var canceled = !body.dispatchEvent(evt);
  if(canceled) {
    // A handler called preventDefault
    alert("canceled");
  } else {
    // None of the handlers called preventDefault
    alert("not canceled");
  }
}

No probé esto, pero está adaptado del código en la documentación de dispatchEvent () . Probablemente quiera leer eso, y también los documentos para createEvent () y initKeyEvent ().

Puede crear y enviar eventos de teclado, y activarán los controladores de eventos registrados apropiados, sin embargo , no producirán ningún texto , si se envían al elemento de entrada, por ejemplo.

Para simular completamente la entrada de texto, debe producir una secuencia de eventos de teclado y configurar explícitamente el texto del elemento de entrada. La secuencia de eventos depende de cuán completamente desee simular la entrada de texto.

La forma más simple sería:

$('input').val('123');
$('input').change();

En algunos casos, el keypressevento no puede proporcionar la funcionalidad requerida. De los documentos de Mozilla podemos ver que la característica está en desuso:

Esta característica ya no se recomienda. Aunque algunos navegadores aún pueden admitirlo, es posible que ya se haya eliminado de los estándares web relevantes, que se esté descartando o que solo se conserve por motivos de compatibilidad. Evite usarlo y actualice el código existente si es posible; consulte la tabla de compatibilidad al final de esta página para guiar su decisión. Tenga en cuenta que esta característica puede dejar de funcionar en cualquier momento.

Entonces, dado que el keypressevento se combina a partir de los dos eventos consecuentemente disparados keydown, y el siguiente keyuppara la misma clave, solo genera los eventos uno por uno:

element.dispatchEvent(new KeyboardEvent('keydown',{'key':'Shift'}));
element.dispatchEvent(new KeyboardEvent('keyup',{'key':'Shift'}));

Sobre la base de la respuesta de alex2k8, aquí hay una versión revisada que funciona en todos los navegadores que admite jQuery (el problema estaba en la falta de argumentos para jQuery.event.trigger, que es fácil de olvidar al usar esa función interna).

// jQuery plugin. Called on a jQuery object, not directly.
jQuery.fn.simulateKeyPress = function (character) {
  // Internally calls jQuery.event.trigger with arguments (Event, data, elem).
  // That last argument, 'elem', is very important!
  jQuery(this).trigger({ type: 'keypress', which: character.charCodeAt(0) });
};

jQuery(function ($) {
  // Bind event handler
  $('body').keypress(function (e) {
    alert(String.fromCharCode(e.which));
    console.log(e);
  });
  // Simulate the key press
  $('body').simulateKeyPress('x');
});

Incluso podría llevar esto más lejos y dejar que no solo simule el evento, sino que realmente inserte el carácter (si es un elemento de entrada), sin embargo, hay muchos trucos entre navegadores al intentar hacerlo. Mejor use un complemento más elaborado como SendKeys .

A partir de 2019, esta solución me ha funcionado:

document.dispatchEvent(
  new KeyboardEvent("keydown", {
    key: "e",
    keyCode: 69, // example values.
    code: "KeyE", // put everything you need in this object.
    which: 69,
    shiftKey: false, // you don't need to include values
    ctrlKey: false,  // if you aren't going to use them.
    metaKey: false   // these are here for example's sake.
  })
);

Utilicé esto en mi juego de navegador, para admitir dispositivos móviles con un teclado simulado.

Aclaración: este código despacha un solo keydownevento, mientras que una pulsación de tecla real activaría un keydownevento (o varios de ellos si se mantiene más tiempo), y luego un keyupevento cuando sueltas esa tecla. Si necesita keyupeventos también, también es posible simular keyupeventos cambiando "keydown"a "keyup"en el fragmento de código.

Esto también envía el evento a toda la página web, de ahí el document. Si solo desea que un elemento específico reciba el evento, puede sustituirlo documentpor el elemento deseado.

Para aquellos interesados, de hecho, puede recrear eventos de entrada de teclado de manera confiable. Para cambiar el texto en el área de entrada (mover cursores o la página a través de un carácter de entrada) debe seguir de cerca el modelo de evento DOM: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

El modelo debe hacer:

• foco (enviado en el DOM con el conjunto objetivo)

Luego para cada personaje:

• keydown (enviado en el DOM)
• beforeinput (enviado al destino si es un área de texto o entrada)
• pulsación de tecla (enviado en el DOM)
• input (enviado al destino si es un área de texto o entrada)
• cambio (enviado al objetivo si es una selección)
• keyup (enviado en el DOM)

Entonces, opcionalmente para la mayoría:

• desenfoque (enviado en el DOM con el conjunto de objetivos)

En realidad, esto cambia el texto en la página a través de javascript (sin modificar las declaraciones de valor) y activa los oyentes / controladores de javascript adecuadamente. Si estropea la secuencia, JavaScript no se activará en el orden apropiado, el texto en el cuadro de entrada no cambiará, las selecciones no cambiarán o el cursor no se moverá al siguiente espacio en el área de texto.

Desafortunadamente, el código fue escrito para un empleador bajo un NDA, por lo que no puedo compartirlo, pero definitivamente es posible, pero debe recrear toda la "pila" de entrada clave para cada elemento en el orden correcto.

Este enfoque admite el uso de varios navegadores para cambiar el valor del código clave . Fuente

var $textBox = $("#myTextBox");

var press = jQuery.Event("keypress");
press.altGraphKey = false;
press.altKey = false;
press.bubbles = true;
press.cancelBubble = false;
press.cancelable = true;
press.charCode = 13;
press.clipboardData = undefined;
press.ctrlKey = false;
press.currentTarget = $textBox[0];
press.defaultPrevented = false;
press.detail = 0;
press.eventPhase = 2;
press.keyCode = 13;
press.keyIdentifier = "";
press.keyLocation = 0;
press.layerX = 0;
press.layerY = 0;
press.metaKey = false;
press.pageX = 0;
press.pageY = 0;
press.returnValue = true;
press.shiftKey = false;
press.srcElement = $textBox[0];
press.target = $textBox[0];
press.type = "keypress";
press.view = Window;
press.which = 13;

$textBox.trigger(press);

solo usa CustomEvent

Node.prototype.fire=function(type,options){
     var event=new CustomEvent(type);
     for(var p in options){
         event[p]=options[p];
     }
     this.dispatchEvent(event);
}

4 ex quieren simular ctrl + z

window.addEventListener("keyup",function(ev){
     if(ev.ctrlKey && ev.keyCode === 90) console.log(ev); // or do smth
     })

 document.fire("keyup",{ctrlKey:true,keyCode:90,bubbles:true})

Aquí hay una biblioteca que realmente ayuda: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

No sé de dónde vino, pero es útil. Agrega un .simulate()método a window.KeyEvent, por lo que lo usa simplemente KeyEvent.simulate(0, 13)para simular un entero KeyEvent.simulate(81, 81)para un 'Q'.

Lo obtuve en https://github.com/ccampbell/mousetrap/tree/master/tests .

Esto funcionó para mí y simula un keyup para mi textaera. si lo desea para toda la página sólo hay que poner el KeySimulation()sobre <body>como esto <body onmousemove="KeySimulation()">o si no onmousemovea continuación, onmouseovero onloadlas obras también.

<script>
function KeySimulation()
{
var e = document.createEvent("KeyboardEvent");
if (e.initKeyboardEvent) {  // Chrome, IE
    e.initKeyboardEvent("keyup", true, true, document.defaultView, "Enter", 0, "", false, "");
} else { // FireFox
    e.initKeyEvent("keyup", true, true, document.defaultView, false, false, false, false, 13, 0);
}
document.getElementById("MyTextArea").dispatchEvent(e);
}
</script>

<input type="button" onclick="KeySimulation();" value=" Key Simulation " />
<textarea id="MyTextArea" rows="15" cols="30"></textarea>

Se remaron una sola vez debido al uso fácil en un contexto de consola. Pero probablemente útil aún.

    var pressthiskey = "q"/* <-- q for example */;
    var e = new Event("keydown");
    e.key = pressthiskey;
    e.keyCode = e.key.charCodeAt(0);
    e.which = e.keyCode;
    e.altKey = false;
    e.ctrlKey = true;
    e.shiftKey = false;
    e.metaKey = false;
    e.bubbles = true;
    document.dispatchEvent(e);

Aquí hay una solución que funciona en Chrome y Chromium (solo he probado estas plataformas). Parece que Chrome tiene algún error o enfoque propio para manejar códigos clave, por lo que esta propiedad debe agregarse por separado al KeyboardEvent.

function simulateKeydown (keycode,isCtrl,isAlt,isShift){
    var e = new KeyboardEvent( "keydown", { bubbles:true, cancelable:true, char:String.fromCharCode(keycode), key:String.fromCharCode(keycode), shiftKey:isShift, ctrlKey:isCtrl, altKey:isAlt } );
    Object.defineProperty(e, 'keyCode', {get : function() { return this.keyCodeVal; } });     
    e.keyCodeVal = keycode;
    document.dispatchEvent(e);
}

Esto es lo que logré encontrar:

function createKeyboardEvent(name, key, altKey, ctrlKey, shiftKey, metaKey, bubbles) {
  var e = new Event(name)
  e.key = key
  e.keyCode = e.key.charCodeAt(0)
  e.which = e.keyCode
  e.altKey = altKey
  e.ctrlKey = ctrlKey
  e.shiftKey = shiftKey
  e.metaKey =  metaKey
  e.bubbles = bubbles
  return e
}

var name = 'keydown'
var key = 'a'

var event = createKeyboardEvent(name, key, false, false, false, false, true)

document.addEventListener(name, () => {})
document.dispatchEvent(event)

JavaScript nativo con solución compatible con TypeScript:

Escriba keyCode o la propiedad que esté utilizando y transmítala a KeyboardEventInit

Ejemplo

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);

Eso es lo que probé con js / typecript en Chrome. Gracias a esta respuesta por inspiración.

const x = document.querySelector('input');

const keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
Object.defineProperty(keyboardEvent, "charCode", {
  get() {
    return 13;
  },
});
x.dispatchEvent(keyboardEvent);

tan pronto como el usuario presione la tecla en cuestión, puede almacenar una referencia a eso incluso y usarla en cualquier otro elemento HTML:

EnterKeyPressToEmulate<input class="lineEditInput" id="addr333_1" type="text" style="width:60%;right:0%;float:right" onkeydown="keyPressRecorder(event)"></input>
TypeHereToEmulateKeyPress<input class="lineEditInput" id="addr333_2" type="text" style="width:60%;right:0%;float:right" onkeydown="triggerKeyPressOnNextSiblingFromWithinKeyPress(event)">
Itappears Here Too<input class="lineEditInput" id="addr333_3" type="text" style="width:60%;right:0%;float:right;" onkeydown="keyPressHandler(event)">
<script>
var gZeroEvent;
function keyPressRecorder(e)
{
  gZeroEvent = e;
}
function triggerKeyPressOnNextSiblingFromWithinKeyPress(TTT)
{
  if(typeof(gZeroEvent) != 'undefined')  {
TTT.currentTarget.nextElementSibling.dispatchEvent(gZeroEvent);
keyPressHandler(TTT);
  }
}
function keyPressHandler(TTT)
{
  if(typeof(gZeroEvent) != 'undefined')  {
TTT.currentTarget.value+= gZeroEvent.key;
event.preventDefault();
event.stopPropagation();
  }
}
</script>

puede establecer el KeyCode si crea su propio evento, puede copiar los parámetros existentes de cualquier evento de teclado real (ignorando los objetivos ya que es el trabajo de dispatchEvent) y:

ta = new KeyboardEvent('keypress',{ctrlKey:true,key:'Escape'})

Sé que la pregunta pide una forma de JavaScript para simular una pulsación de tecla. Pero para aquellos que buscan una forma jQuery de hacer las cosas:

var e = jQuery.Event("keypress");
e.which = 13 //or e.keyCode = 13 that simulates an <ENTER>
$("#element_id").trigger(e); 

La parte crítica para lograr que esto funcione es darse cuenta de eso charCode, keyCodey todoswhich son métodos obsoletos . Por lo tanto, si el código que procesa el evento de pulsación de tecla usa cualquiera de estos tres, recibirá una respuesta falsa (por ejemplo, un valor predeterminado de 0).

Siempre que acceda al evento de pulsación de tecla con un método no obsoleto, como key, debería estar bien.

Para completar, agregué el código Javascript básico para activar el evento:

const rightArrowKey = 39
const event = new KeyboardEvent('keydown',{'key':rightArrowKey})
document.dispatchEvent(event)

Quería simular una prensa 'Tab' ... Ampliando la respuesta de Trevor, podemos ver que se presiona una tecla especial como 'tab' pero no vemos el resultado real que tendría una prensa 'tab' ... .

intenté despachar estos eventos para 'activeElement', así como el objeto de documento global, ambos: el código para ambos se agrega a continuación;

fragmento a continuación:

var element = document.getElementById("firstInput");

document.addEventListener("keydown", function(event) {

  console.log('we got key:', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);

  /* enter is pressed */
  if (event.keyCode == 13) {
    console.log('enter pressed:', event);

    setTimeout(function() {
      /*  event.keyCode = 13;  event.target.value += 'b';  */

      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.activeElement.dispatchEvent(e);
    }, 4);

    setTimeout(function() {
      theKey = 'Tab';
      var e = new window.KeyboardEvent('focus', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keydown', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('beforeinput', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keypress', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('input', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('change', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
      e = new window.KeyboardEvent('keyup', {
        bubbles: true,
        key: theKey,
        keyCode: 9,
        charCode: 0,
      });
      document.dispatchEvent(e);
    }, 100);



  } else if (event.keyCode != 0) {
    console.log('we got a non-enter press...: :', event.key, '  keyCode:', event.keyCode, '  charCode:', event.charCode);
  }

});

<h2>convert each enter to a tab in JavaScript... check console for output</h2>
<h3>we dispatchEvents on the activeElement... and the global element as well</h3>

<input type='text' id='firstInput' />
<input type='text' id='secondInput' />

<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
    Click me to display Date and Time.</button>
<p id="demo"></p>