เป็นไปได้หรือไม่ที่จะจำลองเหตุการณ์การกดปุ่มแบบเป็นโปรแกรม

เป็นไปได้หรือไม่ที่จะจำลองเหตุการณ์การกดปุ่มในโปรแกรมโดยใช้ JavaScript?

เวอร์ชันที่ไม่ใช่ jquery ที่ทำงานได้ทั้งในเว็บคิตและตุ๊กแก:

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

หากคุณตกลงที่จะใช้ 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");
});

สิ่งที่คุณสามารถทำได้คือโปรแกรมเรียกฟัง KeyEventโดยการยิงkeyevents มันสมเหตุสมผลที่จะอนุญาตให้ทำสิ่งนี้จากมุมมองด้านความปลอดภัย เมื่อใช้ความสามารถนี้คุณจะสามารถใช้รูปแบบการสังเกตการณ์ทั่วไปได้ คุณสามารถเรียกวิธีนี้ "จำลอง"

ด้านล่างเป็นตัวอย่างของวิธีการทำให้สำเร็จในมาตรฐาน 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- และอนุญาตให้ผ่าน sandbox ที่คนเหล่านี้ได้รับการวางขั้นตอนออก ; Firefox

คำอธิบายโดยละเอียด:

คุณทำไม่ได้และคุณจะต้องไม่ใช้เพื่อเหตุผลด้านความปลอดภัย (ตามที่ Pekka ระบุไว้แล้ว) คุณจะต้องมีการโต้ตอบกับผู้ใช้เสมอ นอกจากนี้ให้จินตนาการถึงโอกาสที่ผู้ค้าเบราว์เซอร์จะถูกฟ้องร้องจากผู้ใช้เนื่องจากเหตุการณ์แป้นพิมพ์แบบโปรแกรมต่าง ๆ จะนำไปสู่การปลอมแปลงการโจมตี

ดูโพสต์นี้สำหรับทางเลือกและรายละเอียดเพิ่มเติม มีการคัดลอกและวางที่ใช้แฟลชเสมอ นี่เป็นสง่า ตัวอย่างเช่น ในขณะเดียวกันก็เป็นเครื่องยืนยันได้ว่าทำไมเว็บถึงย้ายออกจากผู้ขายปลั๊กอิน

มีแนวคิดการรักษาความปลอดภัยที่คล้ายกันซึ่งนำไปใช้ในกรณีของนโยบายการเลือกใช้ CORS ในการเข้าถึงเนื้อหาระยะไกลโดยทางโปรแกรม

คำตอบคือ
ไม่มีทางที่จะปุ่มทริกเกอร์อินพุตโปรแกรมในสภาพแวดล้อมที่เบราว์เซอร์ sandboxed ภายใต้สถานการณ์ปกติไม่เป็น

ด้านล่าง:ฉันไม่ได้บอกว่ามันจะเป็นไปไม่ได้ในอนาคตภายใต้โหมดเบราว์เซอร์พิเศษและ / หรือสิทธิพิเศษไปสู่เป้าหมายสุดท้ายของการเล่นเกมหรือประสบการณ์ของผู้ใช้ที่คล้ายกัน แต่ก่อนที่จะเข้าโหมดดังกล่าวผู้ใช้จะถูกถามสิทธิ์และความเสี่ยงที่คล้ายกับรูปแบบเต็มหน้าจอ API

มีประโยชน์:ในบริบทของ KeyCodes เครื่องมือนี้และการจับคู่รหัสจะมีประโยชน์

การเปิดเผยข้อมูล:คำตอบขึ้นอยู่กับคำตอบที่นี่

คุณสามารถส่งเหตุการณ์แป้นพิมพ์บนองค์ประกอบเช่นนี้

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

คุณสามารถใช้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 ()

คุณสามารถสร้างและส่งเหตุการณ์แป้นพิมพ์และพวกเขาจะทริกเกอร์ตัวจัดการเหตุการณ์ที่ลงทะเบียนที่เหมาะสมอย่างไรก็ตามพวกเขาจะไม่สร้างข้อความใด ๆหากส่งไปยังองค์ประกอบการป้อนข้อมูลเช่น

ในการจำลองการป้อนข้อความอย่างสมบูรณ์คุณจะต้องสร้างลำดับเหตุการณ์แป้นพิมพ์รวมทั้งตั้งค่าข้อความขององค์ประกอบอินพุตอย่างชัดเจน ลำดับเหตุการณ์ขึ้นอยู่กับว่าคุณต้องการจำลองการป้อนข้อความแบบละเอียดมากเพียงใด

รูปแบบที่ง่ายที่สุดคือ:

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

ในบางกรณีkeypressเหตุการณ์ไม่สามารถให้ funtionality ที่ต้องการ จากmozilla docsเราจะเห็นได้ว่าฟีเจอร์นั้นเลิกใช้แล้ว:

ไม่แนะนำคุณลักษณะนี้อีกต่อไป แม้ว่าเบราว์เซอร์บางตัวอาจยังคงสนับสนุนเบราว์เซอร์นั้นอาจถูกลบออกจากมาตรฐานเว็บที่เกี่ยวข้องแล้วอาจอยู่ระหว่างการตกหล่นหรืออาจถูกเก็บไว้เพื่อความเข้ากันได้เท่านั้น หลีกเลี่ยงการใช้งานและอัปเดตรหัสที่มีอยู่ถ้าเป็นไปได้ ดูตารางความเข้ากันได้ที่ด้านล่างของหน้านี้เพื่อเป็นแนวทางในการตัดสินใจของคุณ โปรดทราบว่าคุณลักษณะนี้อาจหยุดทำงานเมื่อใดก็ได้

ดังนั้นเนื่องจากkeypressเหตุการณ์ถูกรวมเข้าด้วยกันจากทั้งสองเหตุการณ์จึงทำให้เกิดเหตุการณ์keydownและต่อไปนี้keyupสำหรับคีย์เดียวกันเพียงแค่สร้างเหตุการณ์แบบหนึ่งต่อหนึ่ง:

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

สร้างจากคำตอบจาก 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');
});

คุณสามารถผลักดันสิ่งนี้เพิ่มเติมและปล่อยให้มันไม่เพียง แต่จำลองเหตุการณ์ แต่จริง ๆ แล้วแทรกอักขระ (ถ้าเป็นองค์ประกอบอินพุต) อย่างไรก็ตามมี gotcha ข้ามเบราว์เซอร์จำนวนมากเมื่อพยายามทำเช่นนั้น ดีกว่าใช้ปลั๊กอินที่ซับซ้อนมากขึ้นเช่นSendKeys

สำหรับผู้ที่สนใจคุณสามารถสร้างกิจกรรมป้อนข้อมูลด้วยแป้นพิมพ์จริง ๆ ได้อย่างน่าเชื่อถือ ในการเปลี่ยนข้อความในพื้นที่ป้อนข้อมูล (เลื่อนเคอร์เซอร์หรือหน้าผ่านอักขระป้อนข้อมูล) คุณต้องติดตามรูปแบบเหตุการณ์ DOM อย่างใกล้ชิด: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

รูปแบบที่ควรทำ:

• โฟกัส (จัดส่งบน DOM พร้อมชุดเป้าหมาย)

จากนั้นสำหรับตัวละครแต่ละตัว:

• keydown (จัดส่งบน DOM)
• beforeinput (ส่งไปที่เป้าหมายหากเป็น textarea หรือ input)
• keypress (จัดส่งบน DOM)
• อินพุต (ส่งไปที่เป้าหมายหากเป็น textarea หรืออินพุต)
• เปลี่ยน (ส่งไปที่เป้าหมายหากมีการเลือก)
• keyup (จัดส่งบน DOM)

จากนั้นเลือกมากที่สุด:

• เบลอ (จัดส่งบน DOM พร้อมชุดเป้าหมาย)

นี่เป็นการเปลี่ยนแปลงข้อความในหน้าเว็บผ่านทางจาวาสคริปต์ (โดยไม่ต้องแก้ไขข้อความสั่งค่า) และตั้งค่าตัวรับฟัง / ตัวจัดการจาวาสคริปต์อย่างเหมาะสม หากคุณทำผิดลำดับ javascript จะไม่ทำงานตามลำดับที่เหมาะสมข้อความในกล่องอินพุตจะไม่เปลี่ยนแปลงการเลือกจะไม่เปลี่ยนแปลงมิฉะนั้นเคอร์เซอร์จะไม่ย้ายไปยังพื้นที่ถัดไปในพื้นที่ข้อความ

น่าเสียดายที่รหัสถูกเขียนขึ้นสำหรับนายจ้างภายใต้ NDA ดังนั้นฉันจึงไม่สามารถแบ่งปันได้ แต่เป็นไปได้อย่างแน่นอน แต่คุณต้องสร้าง "สแต็ค" ป้อนคีย์ทั้งหมดสำหรับแต่ละองค์ประกอบตามลำดับที่ถูกต้อง

ตั้งแต่ปี 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องค์ประกอบที่ต้องการ

นี้สนับสนุนแนวทางของเบราว์เซอร์เปลี่ยนค่าของรหัสที่สำคัญ แหล่ง

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

เพียงใช้ 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})

นี่คือห้องสมุดที่ช่วยได้จริงๆ: 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

สิ่งนี้ใช้งานได้สำหรับฉันและมันจำลองปุ่มกดสำหรับ 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>

มันเป็นแถวเดียวครั้งเดียวเนื่องจากการใช้งานง่ายในบริบทของคอนโซล แต่ก็ยังคงมีประโยชน์

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

นี่คือโซลูชันที่ใช้งานได้ใน 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);
}

นี่คือสิ่งที่ฉันจัดการเพื่อค้นหา:

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)

Native JavaScript พร้อมโซลูชันที่รองรับ TypeScript:

พิมพ์ keyCode หรือคุณสมบัติใด ๆ ที่คุณใช้และส่งไปยัง KeyboardEventInit

ตัวอย่าง

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

นั่นคือสิ่งที่ฉันลองกับ js / typescript ใน chrome ขอบคุณ คำตอบสำหรับแรงบันดาลใจนี้

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

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

ทันทีที่ผู้ใช้กดปุ่มที่เป็นปัญหาคุณสามารถจัดเก็บการอ้างอิงถึงแม้กระทั่งและใช้มันในองค์ประกอบอื่น ๆ 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'})

ฉันรู้ว่าคำถามถามหาวิธีจาวาสคริปต์ในการจำลองปุ่มกด แต่สำหรับผู้ที่กำลังมองหาวิธี jQuery ในการทำสิ่งต่าง ๆ :

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

ส่วนที่สำคัญของการได้รับการทำงานก็คือการตระหนักว่าcharCode, keyCodeและwhichมีวิธีการเลิกทั้งหมด ดังนั้นหากประมวลผลรหัสเหตุการณ์การกดปุ่มใช้สามอย่างใดอย่างหนึ่งมันจะได้รับคำตอบปลอม (เช่นค่าเริ่มต้น 0)

ตราบใดที่คุณเข้าถึงเหตุการณ์การกดปุ่มด้วยวิธีที่ไม่ได้รับการปฏิเสธเช่นkeyคุณควรจะตกลง

เมื่อเสร็จแล้วฉันได้เพิ่มรหัส Javascript พื้นฐานสำหรับการเรียกใช้เหตุการณ์:

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

ฉันต้องการจำลองการกด 'Tab' ... การตอบคำถามของ Trevor เราจะเห็นว่ามีการกดปุ่มพิเศษเช่น '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>