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

381

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

bronzer
la source
2
Pouvez-vous clarifier «simuler»? Votre objectif est-il de tester votre site Web ou de mettre en œuvre la fonctionnalité onclick, onmousedown, etc. d'un lien donné?
Paulo

Réponses:

181

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);
Philip Nuzhnyy
la source
8
Philip, cela ressemble au code dont j'ai besoin, mais j'ai besoin de répartir l'événement keypress dans une zone de texte. J'ai essayé de modifier votre code pour l'envoyer dans une zone de texte, mais cela ne semble pas fonctionner, en chrome au moins, une idée de ce qui pourrait ne pas fonctionner? voici le jsfiddle que j'ai fait pour démontrer: jsfiddle.net/szmJu
user280109
4
Il s'avère qu'il y a un bogue dans Chromium avec la répartition de KeyboardEvent. Consultez ce fil pour plus de détails: stackoverflow.com/questions/10455626/… .
Philip Nuzhnyy
27
keyCodeest toujours 0 et je ne peux pas le changer.
Ata Iravani
9
Il semble qu'il y ait un bogue dans Chromium qui fait que le event.whichsoit toujours 0lors de l'utilisation document.createEvent("KeyboardEvent"). @lluft a partagé les détails et une solution de contournement, qui a fonctionné pour moi, dans ce commentaire sur un autre fil. Fondamentalement, vous devez utiliser document.createEvent('Event')pour créer un événement générique, puis définir le type keydownet attribuer une keyCodepropriété égale au code de caractère de la clé.
A-Diddy
8
Il semble que cette fonctionnalité ait été supprimée maintenant. Cependant, MDN l'a considéré comme obsolète depuis un bon moment.
Tacticus
72

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");
});
alex2k8
la source
Salut Ce que je voulais dire est: 1. Enregistrer un événement clé (la lettre e exécute certains JS) 2. D'une autre méthode, je veux appuyer sur la lettre e) par programmation
tan
9
Cela ne fonctionne pas correctement dans Chrome, désolé. jQuery crée un événement, mais sans attributs importants - qui, charCode, keyCode.
hamczu
4
@tan Ce n'est pas possible. Voir ma réponse pour le raisonnement derrière elle.
Lorenz Lo Sauer
51

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 .

Lorenz Lo Sauer
la source
Ainsi, avec l'API JavaScript KeyboardEvent ( developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent ), vous pouvez simuler des événements de touche, par exemple dire qu'une touche est enfoncée mais qu'il n'est pas possible d'avoir l'effet de touche enfoncée , comme écrire des caractères 'a', 'b', 'c'? Si c'est possible, l'écriture de ces caractères de base n'est pas un problème de sécurité mais je comprends qu'une clé spéciale comme "F12" ou une combinaison comme "Alt + F4" devrait être interdite.
baptx
1
Voici ce que j'obtiens lorsque j'exécute votre jQuery dans Chrome: Uncaught ReferenceError: le caractère n'est pas défini
Jayden Lawson
30

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

element.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
aljgom
la source
12
Je pense que cette réponse devrait mentionner le fait que l'envoi dans l'événement js ne met pas à jour le contenu d'entrée.
Kirill Reznikov
5
Le dernier Firefox n'est pas moderne?
emix
Semble keypressêtre déprécié, en utilisant à la keydownplace -> developer.mozilla.org/en-US/docs/Web/Events/keypress
JMT2080AD
Cela fonctionne parfaitement pour moi avec Chrome Embedded, selon mes besoins.
Paulo França Lacerda
25

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 ().

Plutor
la source
16
Remarque: Ceci n'est pris en charge que par les navigateurs Gecko.
lhunath
4
Gecko et d'autres navigateurs n'étaient pas d'accord sur l'utilisation de initKeyEventou initKeyboardEvent(). Les deux sont déconseillés en faveur de l'utilisation du constructeur KeyboardEvent () .
jkmartindale
21

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();
Alex Burtsev
la source
15

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'}));
Малъ Скрылевъ
la source
13

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 .

Timo Tijhof
la source
1
SendKeys ne simule PAS les pressions de touches, il injecte simplement des valeurs dans les éléments cibles.
Ahmed Masud
2
Ne pas simuler une pression de touche matérielle, simplement appeler la fonction de touche liée.
Codebeat
9

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

haley
la source
1
C'est la seule solution qui a fonctionné pour moi dans la fonction runJavascript de Qt QWebEngine. Merci
Maxx
complètement ignoré par les jeux Flash pour une raison quelconque (peut-être que Flash ignore tout ce qui ne l'est pas Trusted?)
hanshenrik
@hanshenrik - Pour être honnête, si vous utilisez Flash en 2020, vous devez vraiment reconsidérer les outils les mieux adaptés à votre objectif.
haley
8

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.

Trevor
la source
8
NDA pour JavaScript? Vraiment? , de toute façon, pour chaque caractère, votre algorithme est erroné, la simulation d'un événement "input" ajoute de toute façon du texte sans passer par un keydown complet, un événement keyup ou tout autre événement. Le problème est de savoir comment gérer plusieurs événements de pression de touche, etc., comme appuyer sur un bouton "a" et attendre plusieurs fois "aaaaaaa".
Akash Kava
1
L'astuce consiste à déclencher un keydown, une entrée, puis un keyup. Si vous voulez plusieurs "aaaaaa", continuez de déclencher l'événement d'entrée. et ne le dites à personne.
Trevor
4
J'ai essayé, mais cela ne semble pas fonctionner complètement: je peux déclencher des événements pour les touches Entrée, Retour arrière ou Flèches, mais pas avec les caractères. Par exemple, je ne peux pas saisir de texte via cette méthode bien que j'aie suivi de près votre ordre des événements.
Tacticus
@Tacticus par hasard, vous avez toujours l'exemple de code pour déclencher Enter selon cette réponse?
Siavas
1
J'ai tenté cela, pas de chance.
Mason
7

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);
Ata Iravani
la source
7

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})
bortunac
la source
J'essaie votre code. Si j'appuie sur une touche, j'entre dans l'auditeur, mais document.fire n'a aucun effet.
Mark
"(" n'est pas un problème. Je l'ai corrigé tout de suite. Il n'y a tout simplement pas de problème après document.fire. BTW, je le déclenche en cliquant sur une icône.
Mark
Mon code ressemble à ceci: <img src = "settings.svg" height = "22" width = "24" style = "cursor: pointer;" ng-click = "openAdminConsole ()"> Dans openAdminConsole () je fais document.fire. N'est-ce pas exact?
Mark
4

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>
SeekLoad
la source
2
Soyez averti que initKeyboardEventc'est obsolète. ( Source )
radiovisuel
4

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);
K. Kilian Lindberg
la source
2

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);
}
Soren
la source
1

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)
Konowy
la source
1

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);
Eugen Sunic
la source
1

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);
JLarky
la source
0

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'})
yan bellavance
la source
0

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); 
Srinidhi Shankar
la source
0

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)
Jack Kinsella
la source
0

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>

Akber Iqbal
la source