Est-il possible de simuler des événements de presse clés par programmation?

Est-il possible de simuler des événements de presse clés par programmation en JavaScript?

Une version non jquery qui fonctionne à la fois dans webkit et 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 vous êtes d'accord pour utiliser 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");
});

Ce que vous pouvez faire est de déclencher par programme auditeurs KeyEvent en tirant KeyEvents . Il est logique de permettre cela dans une perspective de sécurité en bac à sable. En utilisant cette capacité, vous pouvez ensuite appliquer un modèle d' observateur typique . Vous pouvez appeler cette méthode "simulation".

Vous trouverez ci-dessous un exemple de la façon de réaliser cela dans le standard DOM W3C avec 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...
  }
}

Cet exemple est adapté de: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Dans jQuery:

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

Mais récemment, il n'y a aucun moyen [DOM] de déclencher réellement des événements clés quittant le sandbox du navigateur. Et tous les principaux fournisseurs de navigateurs adhéreront à ce concept de sécurité.

Quant aux plugins tels qu'Adobe Flash - qui sont basés sur le NPAPI -, et permettent de contourner le bac à sable: ils sont en phase de suppression ; Firefox .

Explication détaillée:

Vous ne pouvez pas et vous ne devez pas le faire pour des raisons de sécurité (comme Pekka l'a déjà souligné). Vous aurez toujours besoin d'une interaction utilisateur entre les deux. Imaginez également la possibilité que les fournisseurs de navigateurs soient poursuivis en justice par les utilisateurs, car divers événements de clavier programmés auront conduit à des attaques d'usurpation.

Voir cet article pour des alternatives et plus de détails. Il y a toujours le copier-coller basé sur Flash. Voici un exemple élégant . Dans le même temps, c'est un témoignage de la raison pour laquelle le Web s'éloigne des fournisseurs de plugins.

Un état d'esprit de sécurité similaire est appliqué dans le cas de la stratégie opt-in CORS pour accéder au contenu distant par programmation.

La réponse est:
il n'y a aucun moyen de déclencher par programmation des clés d'entrée dans l'environnement de navigateur en bac à sable dans des circonstances normales .

Bottomline: Je ne dis pas que cela ne sera pas possible à l'avenir, sous des modes de navigateur spéciaux et / ou des privilèges vers l'objectif final du jeu, ou des expériences utilisateur similaires. Cependant, avant d'accéder à de tels modes, il sera demandé à l'utilisateur des autorisations et des risques, similaires au modèle d'API plein écran .

Utile: dans le contexte de KeyCodes, cet outil et le mappage de codes clés seront utiles.

Divulgation: La réponse est basée sur la réponse ici .

Vous pouvez envoyer des événements de clavier sur un élément comme celui-ci

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

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

Je n'ai pas testé cela, mais il est adapté du code de la documentation de dispatchEvent () . Vous voudrez probablement lire cela, ainsi que les documents pour createEvent () et initKeyEvent ().

Vous pouvez créer et distribuer des événements de clavier, et ils déclencheront des gestionnaires d'événements enregistrés appropriés, mais ils ne produiront aucun texte , s'ils sont distribués à l'élément d'entrée par exemple.

Pour simuler entièrement la saisie de texte, vous devez produire une séquence d'événements de clavier et définir explicitement le texte de l'élément d'entrée. La séquence d'événements dépend de la profondeur avec laquelle vous souhaitez simuler la saisie de texte.

La forme la plus simple serait:

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

Dans certains cas, l' keypressévénement ne peut pas fournir la fonctionnalité requise. À partir de la documentation de Mozilla, nous pouvons voir que la fonctionnalité est déconseillée:

Cette fonctionnalité n'est plus recommandée. Bien que certains navigateurs puissent toujours le prendre en charge, il peut avoir déjà été supprimé des normes Web pertinentes, être en cours de suppression ou ne peut être conservé qu'à des fins de compatibilité. Évitez de l'utiliser et mettez à jour le code existant si possible; consultez le tableau de compatibilité au bas de cette page pour guider votre décision. N'oubliez pas que cette fonctionnalité peut cesser de fonctionner à tout moment.

Ainsi, puisque l' keypressévénement est combiné à partir des deux événements déclenchés en conséquence keydown, et les suivants keyuppour la même clé, générez simplement les événements un par un:

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

S'appuyant sur la réponse de alex2k8, voici une version révisée qui fonctionne dans tous les navigateurs pris en charge par jQuery (le problème résidait dans les arguments manquants à jQuery.event.trigger, ce qui est facile à oublier lors de l'utilisation de cette fonction interne).

// 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');
});

Vous pouvez même pousser cela plus loin et le laisser non seulement simuler l'événement mais également insérer le personnage (s'il s'agit d'un élément d'entrée), mais il existe de nombreux accrochages entre navigateurs lorsque vous essayez de le faire. Mieux vaut utiliser un plugin plus élaboré comme SendKeys .

Depuis 2019, cette solution a fonctionné pour moi:

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

Je l'ai utilisé dans mon jeu par navigateur, afin de prendre en charge les appareils mobiles avec un clavier simulé.

Clarification: ce code envoie un seul keydownévénement, tandis qu'une véritable pression sur une touche déclencherait un keydownévénement (ou plusieurs d'entre eux si elle est maintenue plus longtemps), puis un keyupévénement lorsque vous relâchez cette touche. Si vous avez également besoin d' keyupévénements, il est également possible de simuler des keyupévénements en passant "keydown"à "keyup"dans l'extrait de code.

Cela envoie également l'événement à la page Web entière, d'où le document. Si vous souhaitez que seul un élément spécifique reçoive l'événement, vous pouvez remplacer documentl'élément souhaité.

Pour les personnes intéressées, vous pouvez en fait recréer de manière fiable les événements d'entrée au clavier. Pour modifier le texte dans la zone de saisie (déplacer les curseurs ou la page via un caractère de saisie), vous devez suivre de près le modèle d'événement DOM: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

Le modèle devrait faire:

• focus (distribué sur le DOM avec l'ensemble cible)

Puis pour chaque personnage:

• keydown (envoyé sur le DOM)
• beforeinput (distribué sur la cible s'il s'agit d'une zone de texte ou d'une entrée)
• touche (expédiée sur le DOM)
• entrée (envoyée à la cible s'il s'agit d'une zone de texte ou d'une entrée)
• changement (envoyé à la cible si c'est un choix)
• keyup (distribué sur le DOM)

Ensuite, éventuellement pour la plupart:

• flou (distribué sur le DOM avec l'ensemble cible)

Cela modifie en fait le texte de la page via javascript (sans modifier les instructions de valeur) et déclenche les écouteurs / gestionnaires javascript de manière appropriée. Si vous vous trompez, la séquence javascript ne se déclenchera pas dans l'ordre approprié, le texte dans la zone de saisie ne changera pas, les sélections ne changeront pas ou le curseur ne se déplacera pas à l'espace suivant dans la zone de texte.

Malheureusement, le code a été écrit pour un employeur sous un NDA, donc je ne peux pas le partager, mais c'est certainement possible mais vous devez recréer la "pile" d'entrée de clé entière pour chaque élément dans le bon ordre.

Cette approche prend en charge plusieurs navigateurs pour modifier la valeur du code clé . La source

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

utilisez simplement 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 veulent simuler 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})

Voici une bibliothèque qui aide vraiment: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

Je ne sais pas d'où cela vient, mais c'est utile. Il ajoute une .simulate()méthode à window.KeyEvent, donc vous l'utilisez simplement avec KeyEvent.simulate(0, 13)pour simuler un enterou KeyEvent.simulate(81, 81)pour un 'Q'.

Je l'ai eu sur https://github.com/ccampbell/mousetrap/tree/master/tests .

Cela a fonctionné pour moi et il simule une touche pour ma textaera. si vous le voulez pour la page entière vient de mettre le KeySimulation()sur <body>comme celui - ci <body onmousemove="KeySimulation()">ou sinon onmousemovealors onmouseoverou onloadfonctionne aussi.

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

Il a été ramé une seule fois en raison d'une utilisation facile dans un contexte de console. Mais probablement encore utile.

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

Voici une solution qui fonctionne dans Chrome et Chromium (n'ont testé que ces plateformes). Il semble que Chrome ait un bug ou une approche propre pour gérer les codes clés, cette propriété doit donc être ajoutée séparément à 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);
}

Voici ce que j'ai réussi à trouver:

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 natif avec solution prise en charge par TypeScript:

Tapez le keyCode ou la propriété que vous utilisez et convertissez-la en KeyboardEventInit

Exemple

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

C'est ce que j'ai essayé avec js / typescript en chrome. Merci à cette réponse pour l'inspiration.

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

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

dès que l'utilisateur appuie sur la touche en question, vous pouvez stocker une référence à cela même et l'utiliser sur n'importe quel autre élément 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>

vous pouvez définir le keyCode si vous créez votre propre événement, vous pouvez copier les paramètres existants à partir de n'importe quel événement de clavier réel (en ignorant les cibles puisque c'est le travail de dispatchEvent) et:

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

Je sais que la question demande une méthode javascript pour simuler une pression de touche. Mais pour ceux qui recherchent une manière jQuery de faire les choses:

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

La partie critique pour que cela fonctionne est de réaliser cela charCode, keyCodeet ce whichsont toutes des méthodes obsolètes . Par conséquent, si le traitement du code l'événement de pression de touche utilise l'un de ces trois, il recevra alors une réponse fausse (par exemple, une valeur par défaut de 0).

Tant que vous accédez à l'événement de pression de touche avec une méthode non obsolète, par exemple key, vous devriez être OK.

Pour terminer, j'ai ajouté le code Javascript de base pour déclencher l'événement:

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

Je voulais simuler une pression sur "Tab" ... En développant la réponse de Trevor, nous pouvons voir qu'une touche spéciale comme "tab" est pressée mais nous ne voyons pas le résultat réel qu'une presse "tab" aurait .. .

essayé de distribuer ces événements pour 'activeElement' ainsi que pour l'objet document global both - code pour les deux ajouté ci-dessous;

extrait ci-dessous:

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>