Можно ли программно моделировать события нажатия клавиш?

381

Можно ли программно моделировать события нажатия клавиш в JavaScript?

загар
источник
2
Можете ли вы уточнить «симулировать»? Ваша цель - протестировать свой веб-сайт или включить функцию onclick, onmousedown и т. Д. Данной ссылки?
Пауло

Ответы:

181

Версия без jquery, которая работает как в webkit, так и в 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);
Филипп Нужный
источник
8
Филипп, это похоже на код, который мне нужен, но мне нужно отправить событие нажатия клавиши в текстовое поле. Я пытался изменить ваш код для отправки текстовой области, но он не работает, по крайней мере, в Chrome, какая-либо идея, что может быть не так? вот jsfiddle, который я сделал, чтобы продемонстрировать: jsfiddle.net/szmJu
user280109
4
Оказывается, в Chromium есть ошибка с диспетчеризацией KeyboardEvent. Проверьте эту тему для получения дополнительной информации: stackoverflow.com/questions/10455626/… .
Филипп Нужный
27
keyCodeвсегда 0, и я не могу его изменить.
Ата Иревани
9
Похоже, что в Chromium есть ошибка, которая event.whichвсегда будет 0при использовании document.createEvent("KeyboardEvent"). @lluft поделился подробностями и обходным путем, который работал для меня, в этом комментарии в другой ветке. По сути, вам нужно использовать document.createEvent('Event')для создания общего события, а затем установить тип keydownи дать keyCodeсвойство, равное charcode ключа.
A-Diddy
8
Похоже, что эта функция уже удалена. Хотя MDN уже давно считает это устаревшим.
Tacticus
72

Если вы можете использовать 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
источник
Привет, что я имел в виду: 1. Зарегистрировать ключевое событие (буква e выполняет JS) 2. Из другого метода я хочу программно нажать букву e)
tan
9
Это не работает должным образом в Chrome, извините. jQuery создает Event, но без важных атрибутов - which, charCode, keyCode.
Хамчу
4
@tan Это невозможно. Смотрите мой ответ для обоснования этого.
Лоренц Ло Зауэр
51

То, что вы можете сделать, это программно запускать слушатели ключевых событий путем запуска ключевых событий . Имеет смысл разрешить это с точки зрения безопасности. Используя эту способность, вы можете применить типичный шаблон наблюдателя . Вы можете назвать этот метод "имитацией".

Ниже приведен пример того, как этого добиться в стандарте W3C DOM вместе с 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...
  }
}

Этот пример адаптирован из: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

В jQuery:

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

Но в последнее время [DOM] не существует способа вызвать события, оставляющие браузер-песочницу. И все основные поставщики браузеров будут придерживаться этой концепции безопасности.

Что касается плагинов, таких как Adobe Flash, которые основаны на NPAPI и позволяют обходить песочницу: это постепенный отказ ; Firefox .

Детальное объяснение:

Вы не можете и не должны по соображениям безопасности (как уже указывал Пекка). Вы всегда будете требовать взаимодействия пользователя между ними. Кроме того, представьте, что пользователи браузеров могут подать в суд на пользователей, поскольку различные программные события на клавиатуре приведут к подделке атак.

Смотрите этот пост для альтернатив и более подробной информации. Всегда есть флэш на основе копирования и вставки. Вот элегантный пример . В то же время это свидетельство того, почему Интернет отходит от поставщиков плагинов.

В случае политики CORS opt-in применяется аналогичный подход к безопасности для программного доступа к удаленному контенту.

Ответ
таков: в нормальных условиях нет возможности программно запускать клавиши ввода в изолированной среде браузера .

Итог: я не говорю, что это не будет возможно в будущем, при специальных режимах браузера и / или привилегиях для достижения конечной цели игры или подобного пользовательского опыта. Однако до входа в такие режимы у пользователя будут запрашиваться разрешения и риски, аналогичные модели полноэкранного API .

Полезно: в контексте KeyCodes этот инструмент и сопоставление кодов ключей пригодятся.

Раскрытие: ответ основан на ответе здесь .

Лоренц Ло Зауэр
источник
Таким образом, с помощью API JavaScript KeyboardEvent ( developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent ) вы можете имитировать события клавиш, например, сказать, что клавиша нажата, но эффект нажатия клавиши не возможен Как писать символы «а», «б», «в»? Если это возможно, написание этих базовых символов не является проблемой безопасности, но я понимаю, что специальный ключ, например «F12», или комбинацию, например «Alt + F4», следует запретить.
baptx
1
Это то, что я получаю, когда запускаю ваш jQuery в Chrome: Uncaught ReferenceError: символ не определен
Jayden Lawson
30

Вы можете отправлять события клавиатуры на элемент, подобный этому

element.dispatchEvent(new KeyboardEvent('keypress',{'key':'a'}));
aljgom
источник
12
Я думаю, что в ответе следует упомянуть тот факт, что отправленное в событии js не обновляет входной контент.
Кирилл Резников
5
Последний Firefox не современный?
emix
Кажется, что keypressэто устарело, keydownвместо этого используйте -> developer.mozilla.org/en-US/docs/Web/Events/keypress
JMT2080AD
Он отлично работает для меня с Chrome Embedded, как мне нужно.
Пауло Франса Ласерда
25

Вы можете использовать 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");
  }
}

Я не проверял это, но он адаптирован из кода документации dispatchEvent () . Вы, вероятно, захотите прочитать это, а также документы для createEvent () и initKeyEvent ().

Plutor
источник
16
Примечание. Это поддерживается только браузерами Gecko.
лунат
4
Gecko и другие браузеры не сошлись во мнении, использовать initKeyEventили нет initKeyboardEvent(). Оба устарели в пользу использования конструктора KeyboardEvent () .
jkmartindale
21

Вы можете создавать и отправлять события клавиатуры, и они будут запускать соответствующие зарегистрированные обработчики событий, однако они не будут генерировать никакого текста , если отправлены, например, в элемент ввода.

Чтобы полностью имитировать ввод текста, необходимо создать последовательность событий клавиатуры и явно указать текст элемента ввода. Последовательность событий зависит от того, насколько тщательно вы хотите смоделировать ввод текста.

Простейшая форма будет:

$('input').val('123');
$('input').change();
Алекс Бурцев
источник
15

В некоторых случаях keypressсобытие не может обеспечить требуемую функциональность. Из документации Mozilla мы видим, что эта функция устарела:

Эта функция больше не рекомендуется. Хотя некоторые браузеры могут по-прежнему поддерживать его, он, возможно, уже удален из соответствующих веб-стандартов, может быть в процессе удаления или может храниться только в целях совместимости. Избегайте его использования и обновляйте существующий код, если это возможно; см. таблицу совместимости внизу этой страницы, чтобы принять решение. Имейте в виду, что эта функция может перестать работать в любое время.

Таким образом, поскольку keypressсобытие комбинируется из двух последовательно запускаемых событий keydownи следующих keyupза ним для одного и того же ключа, просто генерируйте события по одному:

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

Основываясь на ответе alex2k8, вот пересмотренная версия, которая работает во всех браузерах, которые поддерживает jQuery (проблема заключалась в отсутствии аргументов в jQuery.event.trigger, что легко забыть при использовании этой внутренней функции).

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

Вы могли бы даже продвинуть это дальше и позволить ему не только имитировать событие, но и фактически вставлять символ (если это элемент ввода), однако при попытке сделать это есть много кросс-браузерных ошибок. Лучше использовать более сложный плагин, такой как SendKeys .

Тимо Тиххоф
источник
1
SendKeys НЕ моделирует нажатия клавиш, он просто вводит значения в целевые элементы.
Ахмед Масуд
2
Не имитирует аппаратное нажатие клавиш, просто вызывает функцию связанного нажатия клавиш.
Codebeat
9

Начиная с 2019 года это решение работает для меня:

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

Я использовал это в своей браузерной игре, чтобы поддерживать мобильные устройства с симулированной клавиатурой.

Пояснение: этот код отправляет одно keydownсобытие, в то время как нажатие реальной клавиши вызывает одно keydownсобытие (или несколько из них, если оно удерживается дольше), а затем одно keyupсобытие, когда вы отпускаете эту клавишу. Если вам нужны keyupсобытия тоже, также можно моделировать keyupсобытия путем изменения "keydown"к "keyup"в фрагменте кода.

Это также посылает событие для всей веб - страницы, поэтому document. Если вы хотите, чтобы только определенный элемент получил событие, вы можете заменить его documentна нужный элемент.

Хейли
источник
1
Это единственное решение, которое работает для меня в функции runJavascript Qt QWebEngine. Спасибо
Maxx
почему-то полностью игнорируется Flash-играми (может быть, Flash игнорирует все, что не так Trusted?)
hanshenrik
@hanshenrik - Если честно, если вы используете Flash в 2020 году, вам действительно нужно пересмотреть, какие инструменты лучше всего подходят для ваших целей.
Хейли
8

Для тех, кто заинтересован, вы можете надежно воссоздать события ввода с клавиатуры. Чтобы изменить текст в области ввода (перемещать курсоры или страницу с помощью вводимого символа), необходимо внимательно следовать модели событий DOM: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

Модель должна делать:

  • focus (отправляется на DOM с установленной целью)

Тогда для каждого персонажа:

  • keydown (отправляется на DOM)
  • beforeinput (отправляется на цель, если это текстовое поле или вход)
  • нажатие клавиши (отправлено на DOM)
  • input (отправляется на цель, если это textarea или input)
  • изменить (отправляется на цель, если его выбор)
  • keyup (отправляется на DOM)

Тогда, по выбору, для большинства:

  • размытие (отправляется на DOM с установленной целью)

Это на самом деле изменяет текст на странице с помощью javascript (без изменения операторов значений) и соответственно отключает любые прослушиватели / обработчики javascript. Если вы ошибетесь в последовательности, javascript не будет запущен в соответствующем порядке, текст в поле ввода не изменится, выбор не изменится или курсор не переместится на следующий пробел в текстовой области.

К сожалению, код был написан для работодателя под NDA, поэтому я не могу поделиться им, но это определенно возможно, но вы должны воссоздать весь «стек» ввода ключа для каждого элемента в правильном порядке.

Тревор
источник
8
Нда для JavaScript? В самом деле? в любом случае, для каждого символа ваш алгоритм неверен, симуляция события «input» в любом случае добавляет текст, не проходя весь keydown, keyup или любое другое событие. Проблема в том, как обрабатывать несколько событий нажатия клавиш и т. Д., Например, нажать кнопку «а» и ожидать «aaaaaaa» несколько раз.
Акаш Кава
1
Хитрость заключается в том, чтобы запустить keydown, ввод, затем keyup. Если вы хотите несколько «aaaaaa», продолжайте вводить событие ввода. и никому не говори.
Тревор
4
Я попробовал это, но это, кажется, не работает полностью: я могу вызвать события для клавиш Enter, Backspace или со стрелками, но не с символами. Например, я не могу вводить текст с помощью этого метода, хотя я внимательно следил за вашим порядком событий.
Tacticus
@Tacticus случайно у вас еще есть пример кода для вызова Enter в соответствии с этим ответом?
Сиавас
1
Я попытался это, не повезло.
Мейсон
7

Этот подход поддерживает кросс-браузерное изменение значения кода ключа . Источник

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);
Ата Иревани
источник
7

просто используйте 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 бывших хотят симулировать 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
источник
Я пытаюсь ваш код. Если я нажимаю клавишу, я попадаю в слушатель, но document.fire не действует.
Mark
"(" не проблема. Я исправил это сразу. Он просто не попадает в это после document.fire. Кстати, я запускаю его, нажимая на иконку.
Mark
Мой код выглядит примерно так: <img src = "settings.svg" height = "22" width = "24" style = "cursor: pointer;" ng-click = "openAdminConsole ()"> В openAdminConsole () я делаю document.fire. Это не правильно?
Mark
4

Вот библиотека, которая действительно помогает: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

Я не знаю, откуда это взялось, но это полезно. Он добавляет .simulate()метод window.KeyEvent, поэтому вы используете его просто KeyEvent.simulate(0, 13)для имитации enterили KeyEvent.simulate(81, 81)для 'Q'.

Я получил его по адресу https://github.com/ccampbell/mousetrap/tree/master/tests .

fiatjaf
источник
4

Это сработало для меня, и это имитирует keyup для моей textaera. если вы хотите его для всей страницы просто поставить KeySimulation()на <body>подобных <body onmousemove="KeySimulation()">или , если не onmousemoveто onmouseoverи onloadтоже работает.

<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
источник
2
Имейте в виду, что initKeyboardEventэто устарело. ( Источник )
radiovisual
4

Он был однорядным из-за простоты использования в контексте консоли. Но, вероятно, полезно еще.

    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);
К. Килиан Линдберг
источник
2

Вот решение, которое работает в Chrome и Chromium (тестировали только эти платформы). Похоже, что в Chrome есть какая-то ошибка или собственный подход к обработке кодов клавиш, поэтому это свойство нужно добавлять отдельно в 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);
}
Сорен
источник
1

Вот что мне удалось найти:

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
источник
1

Собственный JavaScript с поддержкой TypeScript:

Введите keyCode или любое другое свойство, которое вы используете, и приведите его к KeyboardEventInit.

пример

const event = new KeyboardEvent("keydown", {
          keyCode: 38,
        } as KeyboardEventInit);
Евгений Сунич
источник
1

Вот что я попробовал с js / typcript в chrome. Спасибо за этот ответ для вдохновения.

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

const keyboardEvent = new KeyboardEvent("keypress", { bubbles: true });
Object.defineProperty(keyboardEvent, "charCode", {
  get() {
    return 13;
  },
});
x.dispatchEvent(keyboardEvent);
JLarky
источник
0

как только пользователь нажмет соответствующую клавишу, вы можете сохранить ссылку на нее и использовать ее в любом другом 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>

Вы можете установить keyCode, если вы создаете свое собственное событие, вы можете скопировать существующие параметры из любого реального события клавиатуры (игнорируя цели, так как это задание dispatchEvent) и:

ta = new KeyboardEvent('keypress',{ctrlKey:true,key:'Escape'})
Ян Беллаванс
источник
0

Я знаю, что вопрос требует javascript способ имитации нажатия клавиш. Но для тех, кто ищет способ сделать jQuery:

var e = jQuery.Event("keypress");
e.which = 13 //or e.keyCode = 13 that simulates an <ENTER>
$("#element_id").trigger(e); 
Сринидхи Шанкар
источник
0

Важнейшая часть для того, чтобы заставить это работать, - осознать это charCode, keyCodeи все ониwhich являются устаревшими методами . Поэтому, если обработка кода событие нажатия клавиши, использует любое из этих трех, он получит поддельный ответ (например, по умолчанию 0).

Пока вы получаете доступ к событию нажатия клавиши не устаревшим методом, таким как key, вы должны быть в порядке.

Для завершения я добавил базовый код Javascript для запуска события:

const rightArrowKey = 39
const event = new KeyboardEvent('keydown',{'key':rightArrowKey})
document.dispatchEvent(event)
Джек Кинселла
источник
0

Я хотел смоделировать нажатие «Tab» ... Разбираясь с ответом Тревора, мы видим, что специальная клавиша, такая как «Tab», действительно нажимается, но мы не видим фактический результат, который имел бы нажатие «Tab» .. ,

попытался с диспетчеризацией этих событий для 'activeElement', а также для объекта глобального документа; оба кода добавлены ниже;

фрагмент ниже:

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>

Акбер Икбал
источник