É possível simular eventos de pressionamento de tecla programaticamente?

381

É possível simular eventos de pressionamento de tecla programaticamente em JavaScript?

bronzeado
fonte
2
Você pode esclarecer 'simular'? O seu objetivo é testar seu site ou aprovar a funcionalidade onclick, onmousedown etc. de um determinado link?
Paulo

Respostas:

180

Uma versão não-jquery que funciona no webkit e no 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
fonte
8
Philip, isso parece o código que eu preciso, mas preciso enviar o evento de pressionamento de tecla para uma área de texto. Tentei modificar seu código para enviar para uma área de texto, mas ele não parece funcionar, pelo menos no chrome, tem alguma idéia do que pode estar errado? Aqui está o jsfiddle que eu fiz para demonstrar: jsfiddle.net/szmJu
user280109
4
Acontece que há um erro no Chromium com o envio do KeyboardEvent. Confira este tópico para obter mais detalhes: stackoverflow.com/questions/10455626/… .
Philip Nuzhnyy
27
keyCodeé sempre 0 e não posso alterá-lo.
Ata Iravani
9
Parece que há um bug no Chromium que faz event.whichcom que sempre ocorra 0ao usar document.createEvent("KeyboardEvent"). O @lluft compartilhou os detalhes e uma solução alternativa, que funcionou para mim, neste comentário em um tópico diferente. Basicamente, você precisa usar document.createEvent('Event')para criar um evento genérico e, em seguida, definir o tipo keydowne fornecer uma keyCodepropriedade igual ao código da chave.
A-Diddy
8
Parece que esse recurso já foi removido. A MDN considerou isso obsoleto por um bom tempo, no entanto.
Tacticus
72

Se você está bem para usar o 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
fonte
Oi O que eu quis dizer é: 1. Registrar um evento chave (letra e executa alguns JS) 2. A partir de um outro método que eu quero pressionar programaticamente a letra e)
tan
9
Não funciona corretamente no Chrome, desculpe. jQuery cria Event, mas sem atributos importantes - what, charCode, keyCode.
hamczu
4
@tan Isso não é possível. Veja minha resposta para o raciocínio por trás disso.
Lorenz Lo Sauer
51

O que você pode fazer é acionar programaticamente os ouvintes do evento de chave acionando eventos de chave . Faz sentido permitir isso de uma perspectiva de segurança em área restrita. Usando essa capacidade, você pode aplicar um padrão típico de observador . Você pode chamar esse método de "simulação".

Abaixo está um exemplo de como fazer isso no padrão W3C DOM junto com o 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 exemplo é adaptado de: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

No jQuery:

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

Mas, recentemente, não há [DOM] maneira de realmente acionar eventos importantes saindo da caixa de proteção do navegador. E todos os principais fornecedores de navegadores seguirão esse conceito de segurança.

Quanto aos plug-ins como o Adobe Flash - que são baseados no NPAPI -, e permitem ignorar a sandbox: eles são eliminados gradualmente ; Firefox .

Explicação detalhada:

Você não pode e não deve por motivos de segurança (como já destacou Pekka). Você sempre exigirá uma interação do usuário no meio. Além disso, imagine a chance de os fornecedores de navegadores serem processados ​​pelos usuários, pois vários eventos programáticos do teclado levaram a ataques de falsificação.

Veja este post para alternativas e mais detalhes. Há sempre o copiar e colar baseado em flash. Aqui está um exemplo elegante . Ao mesmo tempo, é um testemunho do motivo pelo qual a Web está se afastando dos fornecedores de plug-ins.

Existe uma mentalidade de segurança semelhante aplicada no caso da política do opt-in para acessar conteúdo remoto programaticamente.

A resposta é:
Não há como acionar programaticamente chaves de entrada no ambiente do navegador em área restrita em circunstâncias normais .

Conclusão: não estou dizendo que não será possível no futuro, sob modos especiais de navegador e / ou privilégios em relação ao objetivo final dos jogos ou experiências similares do usuário. No entanto, antes de entrar nesses modos, o usuário será solicitado a fornecer permissões e riscos, semelhantes ao modelo da API de tela cheia .

Útil: No contexto de KeyCodes, essa ferramenta e o mapeamento de código de chave serão úteis.

Divulgação: a resposta é baseada na resposta aqui .

Lorenz Lo Sauer
fonte
Portanto, com a API JavaScript KeyboardEvent ( developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent ) você pode simular eventos de teclas, por exemplo, digamos que uma tecla foi pressionada, mas não é possível ter o efeito de pressionar a tecla , como escrever caracteres 'a', 'b', 'c'? Se possível, escrever esses caracteres básicos não é um problema de segurança, mas entendo que uma chave especial como "F12" ou uma combinação como "Alt + F4" deve ser proibida.
baptx
11
Isto é o que eu recebo quando eu executar o jQuery no Chrome: Uncaught ReferenceError: personagem não é definido
Jayden Lawson
30

Você pode despachar eventos do teclado em um elemento como este

element.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
aljgom
fonte
12
Acho que essa resposta deve mencionar o fato de que o evento js despachado não atualiza o conteúdo de entrada.
Kirill Reznikov
5
O Firefox mais recente não é moderno?
Emix 16/04/19
Parece que keypressfoi depreciado, usando keydown-> developer.mozilla.org/pt-BR/docs/Web/Events/keypress
JMT2080AD 24/04/19
Funciona perfeitamente para mim com o Chrome Embedded, conforme necessário.
Paulo França Lacerda
25

Você pode 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");
  }
}

Não testei isso, mas ele foi adaptado do código na documentação de dispatchEvent () . Você provavelmente vai querer ler isso e também os documentos para createEvent () e initKeyEvent ().

Plutor
fonte
16
Nota: Isso é suportado apenas pelos navegadores Gecko.
lhunath
4
Gecko e outros navegadores discordaram sobre usar initKeyEventou não initKeyboardEvent(). Ambos foram descontinuados em favor do uso do construtor KeyboardEvent () .
Jkmartindale
21

Você pode criar e despachar eventos do teclado, e eles acionarão os manipuladores de eventos registrados apropriados; no entanto, eles não produzirão nenhum texto , se despachados para o elemento de entrada, por exemplo.

Para simular totalmente a entrada de texto, você precisa produzir uma sequência de eventos do teclado e definir explicitamente o texto do elemento de entrada. A sequência de eventos depende de quão profundamente você deseja simular a entrada de texto.

A forma mais simples seria:

$('input').val('123');
$('input').change();
Alex Burtsev
fonte
15

Em alguns casos, o keypressevento não pode fornecer a funcionalidade necessária. Nos documentos do mozilla , podemos ver que o recurso foi descontinuado:

Esse recurso não é mais recomendado. Embora alguns navegadores ainda possam suportá-lo, ele pode já ter sido removido dos padrões relevantes da Web, pode estar em processo de queda ou ser mantido apenas para fins de compatibilidade. Evite usá-lo e atualize o código existente, se possível; consulte a tabela de compatibilidade na parte inferior desta página para orientar sua decisão. Esteja ciente de que esse recurso pode deixar de funcionar a qualquer momento.

Portanto, como o keypressevento é combinado dos dois eventos acionados consequentemente keydown, e o seguinte keyuppara a mesma chave, apenas gere os eventos um por um:

element.dispatchEvent(new KeyboardEvent('keydown',{'key':'Shift'}));
element.dispatchEvent(new KeyboardEvent('keyup',{'key':'Shift'}));
Малъ Скрылевъ
fonte
13

Com base na resposta do alex2k8, aqui está uma versão revisada que funciona em todos os navegadores suportados pelo jQuery (o problema estava na falta de argumentos para o jQuery.event.trigger, o que é fácil esquecer ao usar essa função 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');
});

Você pode ir além e simular não apenas o evento, mas também inserir o caractere (se for um elemento de entrada); no entanto, existem muitas dicas entre navegadores ao tentar fazer isso. Melhor usar um plugin mais elaborado como o SendKeys .

Timo Tijhof
fonte
11
SendKeys NÃO simula pressionamentos de tecla, apenas injeta valores nos elementos de destino.
Ahmed Masud
2
Não simulando uma pressão de tecla de hardware, apenas chamando a função de pressão de tecla ligada.
Codebeat 22/03/2015
9

A partir de 2019, esta solução funcionou para mim:

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

Usei isso no jogo do meu navegador, para suportar dispositivos móveis com um teclado simulado.

Esclarecimento: Esse código despacha um único keydownevento, enquanto uma pressão real na tecla acionaria um keydownevento (ou vários deles, se for mantido por mais tempo) e, em seguida, um keyupevento quando você soltar essa tecla. Se você também precisar de keyupeventos, também é possível simular keyupeventos alterando "keydown"para "keyup"no trecho de código.

Isso também envia o evento para toda a página da Web, daí o document. Se você desejar que apenas um elemento específico receba o evento, poderá substituir documento elemento desejado.

haley
fonte
11
Esta é a única solução que funcionou para mim na função runJavascript do Qt QWebEngine. Obrigado
Maxx
completamente ignorado por jogos em Flash, por algum motivo (talvez o Flash ignora tudo o que não é Trusted?)
hanshenrik
@hanshenrik - Para ser honesto, se você estiver usando o Flash em 2020, realmente precisará reconsiderar quais ferramentas são mais adequadas para seu objetivo.
haley
8

Para os interessados, é possível recriar de fato os eventos de entrada do teclado de maneira confiável. Para alterar o texto na área de entrada (mover cursores ou a página por meio de um caractere de entrada), é necessário seguir o modelo de evento DOM de perto: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

O modelo deve fazer:

  • focus (despachado no DOM com o destino definido)

Depois, para cada personagem:

  • keydown (enviado no DOM)
  • beforeinput (despachado no destino se for uma área de texto ou entrada)
  • pressionamento de tecla (enviado no DOM)
  • input (despachado no destino se for uma área de texto ou entrada)
  • mudança (despachado no alvo, se for um select)
  • keyup (enviado no DOM)

Em seguida, opcionalmente para a maioria:

  • desfoque (despachado no DOM com o destino definido)

Na verdade, isso altera o texto na página via javascript (sem modificar as declarações de valor) e aciona os ouvintes / manipuladores de javascript adequadamente. Se você estragar a sequência, o javascript não será acionado na ordem apropriada, o texto na caixa de entrada não será alterado, as seleções não serão alteradas ou o cursor não se moverá para o próximo espaço na área de texto.

Infelizmente, o código foi escrito para um empregador sob um NDA, portanto não posso compartilhá-lo, mas é definitivamente possível, mas você deve recriar toda a "pilha" de entrada de chave para cada elemento na ordem correta.

Trevor
fonte
8
NDA para JavaScript? Mesmo? de qualquer maneira, para cada caractere em que seu algoritmo está errado, a simulação do evento "input" adiciona texto de qualquer maneira, sem passar por keydown inteiro, evento de keyup ou qualquer outro evento. O problema é como lidar com vários eventos de pressionamento de tecla, etc., como pressionar o botão "a" e esperar "aaaaaaa" várias vezes.
Akash Kava
11
O truque é acionar um pressionamento de tecla, entrada e chave. Se você quiser vários "aaaaaa", continue disparando o evento de entrada. e não conte a ninguém.
Trevor
4
Eu tentei isso, mas parece que não funciona completamente: posso acionar eventos para Enter, Backspace ou teclas de seta, mas não com caracteres. Por exemplo, não consigo inserir texto por esse método, embora tenha seguido sua ordem de eventos de perto.
Tacticus
@ Tacticus, por acaso, você ainda tem o exemplo de código para acionar o Enter, de acordo com esta resposta?
Siavas 27/01/19
11
Eu tentei isso, sem sorte.
Mason
7

Essa abordagem suporta cross-browser alterando o valor do código-chave . Fonte

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

basta usar 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 quer 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})
Bortunac
fonte
Estou tentando o seu código. Se eu pressionar uma tecla, entro no ouvinte, mas document.fire não tem efeito.
Mark
"(" Não é um problema que fixas certo É só não entrar nele após document.fire BTW, eu estou provocando-la clicando em um ícone....
Mark
Meu código é mais ou menos assim: <img src = "settings.svg" height = "22" width = "24" style = "cursor: ponteiro;" ng-click = "openAdminConsole ()"> No openAdminConsole () estou executando document.fire. Isso não está correto?
Mark
4

Isso funcionou para mim e simula um keyup para o meu textaera. Se você quer para toda a página basta colocar o KeySimulation()sobre <body>como esta <body onmousemove="KeySimulation()">, ou se não onmousemove, em seguida, onmouseoverou onloadobras também.

<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
fonte
2
Esteja avisado de que initKeyboardEventestá obsoleto. ( Source )
radiovisual
4

Ele foi remar uma vez devido ao fácil uso em um contexto de console. Mas provavelmente ainda útil.

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

Aqui está uma solução que funciona no Chrome e no Chromium (apenas testaram essas plataformas). Parece que o Chrome tem algum bug ou uma abordagem própria para lidar com códigos de chave, portanto essa propriedade deve ser adicionada separadamente ao 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
fonte
1

Isto é o que eu consegui 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)
Konowy
fonte
1

JavaScript nativo com solução suportada por TypeScript:

Digite o keyCode ou a propriedade que você está usando e faça a conversão para KeyboardEventInit

Exemplo

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

Foi o que tentei com js / typescript no chrome. Graças a esta resposta para inspiração.

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

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

assim que o usuário pressionar a tecla em questão, você poderá armazenar uma referência a ela e usá-la em qualquer outro 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>

você pode definir o keyCode se criar seu próprio evento, copiar parâmetros existentes de qualquer evento real do teclado (ignorando destinos, pois é o trabalho de dispatchEvent) e:

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

Eu sei que a pergunta pede uma maneira javascript de simular um pressionamento de tecla. Mas para aqueles que procuram uma maneira jQuery de fazer as coisas:

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

A parte crítica de começar este trabalho é perceber que charCode, keyCodee whichsão todos métodos obsoletos . Portanto, se o código que processa o evento de pressionamento de tecla usar qualquer um desses três, ele receberá uma resposta falsa (por exemplo, um padrão de 0).

Desde que você acesse o evento de pressionamento de tecla com um método não preterido, como key, você deve estar OK.

Para concluir, adicionei o código Javascript básico para acionar o evento:

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

Eu queria simular uma imprensa 'Tab' ... Expandindo a resposta de Trevor, podemos ver que uma tecla especial como 'tab' é pressionada, mas não vemos o resultado real que uma imprensa 'tab' teria .. .

tentou enviar esses eventos para 'activeElement', bem como o objeto de documento global - código para os dois adicionados abaixo;

snippet abaixo:

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
fonte