Apakah mungkin untuk mensimulasikan acara pers kunci secara terprogram?


381

Apakah mungkin untuk mensimulasikan acara pers utama secara terprogram dalam JavaScript?


2
Bisakah Anda mengklarifikasi 'simulasi'? Apakah tujuan Anda untuk menguji situs web Anda atau untuk mengaktifkan fungsionalitas onclick, onmousedown, dll. Dari tautan yang diberikan?
Paulo

Jawaban:


180

Versi non-jquery yang berfungsi di webkit dan tokek:

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
Philip, ini terlihat seperti kode yang saya butuhkan, tetapi saya perlu mengirimkan acara penekanan tombol ke textarea. saya mencoba untuk memodifikasi kode Anda untuk mengirim ke textarea, tetapi tampaknya tidak berfungsi, setidaknya di chrome, ada ide apa yang bisa salah? Inilah jsfiddle yang telah saya buat untuk diperagakan: jsfiddle.net/szmJu
user280109

4
Ternyata ada bug di Chromium dengan pengiriman KeyboardEvent. Lihat utas ini untuk detail lebih lanjut: stackoverflow.com/questions/10455626/… .
Philip Nuzhnyy

27
keyCodeselalu 0, dan saya tidak bisa mengubahnya.
Ata Iravani

9
Tampaknya ada bug di Chromium yang menyebabkan event.whichselalu seperti 0saat menggunakan document.createEvent("KeyboardEvent"). @ lluft membagikan detail dan solusi, yang bekerja untuk saya, dalam komentar ini di utas lainnya. Pada dasarnya, Anda perlu menggunakan document.createEvent('Event')untuk membuat acara umum dan kemudian mengatur jenisnya keydowndan memberikan keyCodeproperti yang sama dengan kode kunci kunci.
A-Diddy

8
Tampaknya fitur ini telah dihapus sekarang. MDN menganggapnya sudah ditinggalkan cukup lama.
Tacticus

72

Jika Anda boleh menggunakan 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");
});

Hai Apa yang saya maksud adalah: 1. Daftarkan acara utama (huruf e mengeksekusi beberapa JS) 2. Dari metode lain saya ingin secara sistematis menekan huruf e)
tan

9
Tidak berfungsi dengan baik di Chrome, maaf. jQuery menciptakan Peristiwa, tetapi tanpa atribut penting - yang, charCode, keyCode.
hamczu

4
@tan Ini tidak mungkin. Lihat jawaban saya untuk alasan di baliknya.
Lorenz Lo Sauer


51

Yang dapat Anda lakukan adalah secara terprogram memicu keyevent pendengar dengan menembakkan keyevents . Masuk akal untuk mengizinkan ini dari perspektif keamanan kotak pasir. Dengan menggunakan kemampuan ini, Anda dapat menerapkan pola pengamat yang khas . Anda dapat menyebut metode ini "simulasi".

Di bawah ini adalah contoh bagaimana mencapai ini dalam standar DOM W3C bersama dengan 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...
  }
}

Contoh ini diadaptasi dari: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

Di jQuery:

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

Tetapi pada saat ini, tidak ada [DOM] cara untuk benar-benar memicu keyevents meninggalkan browser-sandbox. Dan semua vendor browser utama akan mematuhi konsep keamanan itu.

Adapun plugin seperti Adobe Flash - yang didasarkan pada NPAPI-, dan mengizinkan melewati kotak pasir: ini adalah penghapusan bertahap ; Firefox .

Penjelasan detail:

Anda tidak dapat dan Anda tidak boleh karena alasan keamanan (seperti yang telah ditunjukkan Pekka). Anda akan selalu membutuhkan interaksi pengguna di antaranya. Selain itu bayangkan peluang vendor browser dituntut oleh pengguna, karena berbagai acara keyboard terprogram akan menyebabkan spoofing serangan.

Lihat posting ini untuk alternatif dan lebih jelasnya. Selalu ada salin dan tempel berbasis flash. Ini adalah contoh yang elegan . Pada saat yang sama itu adalah kesaksian mengapa web menjauh dari vendor plugin.

Ada pola pikir keamanan serupa yang diterapkan dalam kasus kebijakan CORS opt-in untuk mengakses konten jarak jauh secara terprogram.

Jawabannya adalah:
Tidak ada cara untuk secara terprogram memicu kunci input di lingkungan browser berpasir dalam keadaan normal .

Bottomline: Saya tidak mengatakan itu tidak akan mungkin terjadi di masa depan, di bawah mode browser khusus dan / atau hak istimewa menuju tujuan akhir permainan, atau pengalaman pengguna yang serupa. Namun sebelum memasuki mode tersebut, pengguna akan dimintai izin dan risiko, mirip dengan model API Layar Penuh .

Berguna: Dalam konteks KeyCodes, alat ini dan pemetaan kode kunci akan berguna.

Pengungkapan: Jawabannya didasarkan pada jawaban di sini .


Jadi dengan JavaScript KeyboardEvent API ( developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent ) Anda dapat mensimulasikan peristiwa utama, misalnya mengatakan bahwa suatu tombol ditekan tetapi tidak mungkin untuk memiliki efek tombol tekan , suka menulis karakter 'a', 'b', 'c'? Jika memungkinkan, menulis karakter dasar ini bukan masalah keamanan, tetapi saya mengerti bahwa kunci khusus seperti "F12" atau kombinasi seperti "Alt + F4" harus dilarang.
baptx

1
Ini adalah apa yang saya dapatkan ketika saya menjalankan jQuery Anda di Chrome: Uncaught ReferenceError: karakter tidak didefinisikan
Jayden Lawson

30

Anda dapat mengirim acara keyboard pada elemen seperti ini

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

12
Saya pikir jawaban itu harus menyebutkan fakta bahwa dikirim dalam acara js tidak memperbarui konten input.
Kirill Reznikov

5
Firefox terbaru tidak modern?
emix

Tampaknya keypressdisusutkan, menggunakan keydownsebagai gantinya -> developer.mozilla.org/en-US/docs/Web/Events/keypress
JMT2080AD

Ini berfungsi dengan baik untuk saya dengan Chrome Embedded, seperti yang saya butuhkan.
Paulo França Lacerda

25

Anda bisa menggunakan 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");
  }
}

Saya tidak menguji ini, tetapi ini diadaptasi dari kode pada dokumentasi dispatchEvent () . Anda mungkin ingin membacanya, dan juga dokumen untuk createEvent () dan initKeyEvent ().


16
Catatan: Ini hanya didukung oleh peramban Gecko.
lhunath

4
Gecko dan browser lain tidak setuju apakah akan menggunakan initKeyEventatau initKeyboardEvent(). Keduanya sudah usang karena menggunakan konstruktor KeyboardEvent () .
jkmartindale

21

Anda dapat membuat dan mengirim acara keyboard, dan mereka akan memicu penangan acara terdaftar yang sesuai, namun mereka tidak akan menghasilkan teks apa pun , jika dikirim ke elemen input misalnya.

Untuk sepenuhnya mensimulasikan input teks, Anda perlu membuat urutan kejadian keyboard dan secara eksplisit mengatur teks elemen input. Urutan peristiwa tergantung pada seberapa menyeluruh Anda ingin mensimulasikan input teks.

Bentuk paling sederhana adalah:

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

15

Dalam beberapa kasus keypressacara tidak dapat memberikan kesungguhan yang diperlukan. Dari mozilla docs kita dapat melihat bahwa fitur tersebut sudah usang:

Fitur ini tidak lagi direkomendasikan. Meskipun beberapa browser mungkin masih mendukungnya, mungkin telah dihapus dari standar web yang relevan, mungkin sedang dalam proses dijatuhkan, atau hanya dapat disimpan untuk tujuan kompatibilitas. Hindari menggunakannya, dan perbarui kode yang ada jika memungkinkan; lihat tabel kompatibilitas di bagian bawah halaman ini untuk memandu keputusan Anda. Ketahuilah bahwa fitur ini dapat berhenti bekerja kapan saja.

Jadi, karena keypressacara tersebut digabungkan dari dua peristiwa yang dipecat secara berurutan keydown, dan yang mengikutinya keyupuntuk kunci yang sama, buat saja peristiwa satu per satu:

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

13

Membangun jawaban dari alex2k8, berikut adalah versi revisi yang berfungsi di semua browser yang didukung jQuery (masalahnya ada pada argumen yang tidak ada di jQuery.event.trigger, yang mudah dilupakan saat menggunakan fungsi internal itu).

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

Anda bahkan dapat mendorong ini lebih jauh dan membiarkannya tidak hanya mensimulasikan acara tetapi juga benar-benar memasukkan karakter (jika itu adalah elemen input), namun ada banyak gotcha lintas-peramban ketika mencoba melakukan itu. Lebih baik gunakan plugin yang lebih rumit seperti SendKeys .


1
SendKeys TIDAK mensimulasikan penekanan tombol itu hanya menyuntikkan nilai ke elemen target.
Ahmed Masud

2
Tidak mensimulasikan penekanan tombol perangkat keras, hanya memanggil fungsi penekanan tombol yang diikat.
Codebeat

9

Pada 2019, solusi ini telah bekerja untuk saya:

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

Saya menggunakan ini di permainan browser saya, untuk mendukung perangkat seluler dengan tombol simulasi.

Klarifikasi: Kode ini mengirimkan satu keydownperistiwa, sementara penekanan tombol nyata akan memicu satu keydownperistiwa (atau beberapa di antaranya jika ditahan lebih lama), dan kemudian satu keyupperistiwa ketika Anda melepaskan kunci itu. Jika Anda memerlukan keyupacara juga, Anda juga dapat mensimulasikan keyupacara dengan mengubah "keydown"ke "keyup"dalam potongan kode.

Ini juga mengirimkan acara ke seluruh halaman web, karenanya document. Jika Anda hanya ingin elemen tertentu untuk menerima acara, Anda bisa mengganti documentelemen yang diinginkan.


1
Ini adalah satu-satunya solusi yang bekerja untuk saya dalam fungsi runJavascript Qt QWebEngine. Terima kasih
Maxx

benar-benar diabaikan oleh game Flash untuk beberapa alasan (mungkin Flash mengabaikan semua yang bukan Trusted?)
hanshenrik

@hanshenrik - Sejujurnya, jika Anda menggunakan Flash pada tahun 2020, Anda benar-benar perlu mempertimbangkan kembali alat apa yang paling cocok untuk tujuan Anda.
haley

8

Bagi mereka yang tertarik, Anda dapat, pada kenyataannya, menciptakan kembali peristiwa input keyboard dengan andal. Untuk mengubah teks dalam area input (memindahkan kursor, atau halaman melalui karakter input) Anda harus mengikuti model acara DOM dengan cermat: http://www.w3.org/TR/DOM-Level-3-Events/ # h4_events-inputevents

Model harus dilakukan:

  • fokus (dikirim pada DOM dengan target yang ditetapkan)

Kemudian untuk setiap karakter:

  • keydown (dikirim pada DOM)
  • beforeinput (dikirim pada target jika berupa textarea atau input)
  • keypress (dikirim pada DOM)
  • input (dikirim pada target jika berupa textarea atau input)
  • ubah (dikirim pada target jika a pilih)
  • keyup (dikirim pada DOM)

Kemudian, secara opsional untuk sebagian besar:

  • blur (dikirim pada DOM dengan target yang ditetapkan)

Ini sebenarnya mengubah teks di halaman melalui javascript (tanpa mengubah pernyataan nilai) dan mematikan pendengar / penangan javascript apa pun dengan tepat. Jika Anda mengacaukan urutan, javascript tidak akan menyala dalam urutan yang sesuai, teks di kotak input tidak akan berubah, pilihan tidak akan berubah atau kursor tidak akan pindah ke ruang berikutnya di area teks.

Sayangnya kode ini ditulis untuk seorang majikan di bawah NDA jadi saya tidak bisa membagikannya, tetapi itu pasti mungkin tetapi Anda harus membuat ulang seluruh input kunci "tumpukan" untuk setiap elemen dalam urutan yang benar.


8
NDA untuk JavaScript? Betulkah? , bagaimanapun untuk setiap karakter algoritme Anda salah, mensimulasikan acara "input" tetap menambahkan teks tanpa melalui keseluruhan keydown, peristiwa keyup atau peristiwa lainnya. Masalahnya adalah bagaimana menangani beberapa peristiwa penekanan tombol dll. Seperti menekan tombol "a" dan mengharapkan "aaaaaaa" beberapa kali.
Akash Kava

1
Caranya adalah dengan menembakkan keydown, input, lalu keyup. Jika Anda ingin beberapa "aaaaaa" tetap aktifkan acara masukan. dan jangan bilang siapa-siapa.
Trevor

4
Saya mencoba ini tetapi tampaknya tidak berfungsi sepenuhnya: Saya dapat memicu acara untuk Enter, Backspace atau tombol panah, tetapi tidak dengan karakter. Misalnya, saya tidak dapat memasukkan teks melalui metode ini meskipun saya mengikuti urutan acara Anda dengan cermat.
Tacticus

@Tacticus, kebetulan Anda masih memiliki sampel kode untuk memicu Enter sesuai dengan jawaban ini?
Siavas

1
Saya mencoba ini, tidak berhasil.
Mason

7

Pendekatan ini mendukung cross-browser mengubah nilai kode kunci . Sumber

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

cukup gunakan 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 ingin mensimulasikan 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})

Saya mencoba kode Anda. Jika saya menekan tombol saya masuk ke pendengar, tetapi document.fire tidak berpengaruh.
Tandai

"(" bukan masalah. Saya segera memperbaikinya. Hanya saja tidak masuk setelah dokumen.fire. BTW, saya memicunya dengan mengklik ikon.
Mark

Kode saya kira-kira seperti ini: <img src = "settings.svg" height = "22" width = "24" style = "cursor: pointer;" ng-klik = "openAdminConsole ()"> Di openAdminConsole () saya sedang melakukan document.fire. Apakah itu tidak benar?
Tandai

4

Berikut perpustakaan yang benar-benar membantu: https://cdn.rawgit.com/ccampbell/mousetrap/2e5c2a8adbe80a89050aaf4e02c45f02f1cc12d4/tests/libs/key-event.js

Saya tidak tahu dari mana asalnya, tetapi ini sangat membantu. Itu menambahkan .simulate()metode window.KeyEvent, jadi Anda menggunakannya hanya dengan KeyEvent.simulate(0, 13)untuk mensimulasikan enteratau KeyEvent.simulate(81, 81)untuk'Q' .

Saya mendapatkannya di https://github.com/ccampbell/mousetrap/tree/master/tests .


4

Ini bekerja untuk saya dan itu mensimulasikan keyup untuk textaera saya. jika Anda ingin untuk seluruh halaman hanya menempatkan KeySimulation()pada <body>seperti ini <body onmousemove="KeySimulation()">atau jika tidak onmousemovemaka onmouseoveratau onloadkarya juga.

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

2
Berhati-hatilah karena initKeyboardEventsudah usang. ( Sumber )
radiovisual

4

Itu tunggal baris sekali karena penggunaan yang mudah dalam konteks konsol. Tapi mungkin masih bermanfaat.

    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

Berikut adalah solusi yang berfungsi di Chrome dan Chromium (hanya menguji platform ini). Tampaknya Chrome memiliki beberapa bug atau pendekatan sendiri untuk menangani kode kunci sehingga properti ini harus ditambahkan secara terpisah ke 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

Inilah yang berhasil saya temukan:

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)

1

JavaScript asli dengan solusi yang didukung TypeScript:

Ketikkan keyCode atau properti apa pun yang Anda gunakan dan berikan ke KeyboardEventInit

Contoh

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

1

Itulah yang saya coba dengan js / typescript di chrome. Terima kasih atas jawaban ini untuk inspirasi.

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

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

0

segera setelah pengguna menekan kunci yang dimaksud, Anda dapat menyimpan referensi untuk hal itu dan menggunakannya pada HTML elemen lainnya:

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>

Anda dapat mengatur keyCode jika Anda membuat acara Anda sendiri, Anda dapat menyalin parameter yang ada dari setiap kejadian keyboard nyata (mengabaikan target karena itu adalah tugas dispatchEvent) dan:

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

0

Saya tahu pertanyaannya menanyakan cara javascript mensimulasikan penekanan tombol. Tetapi bagi mereka yang mencari cara jQuery dalam melakukan sesuatu:

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

0

Bagian penting dari membuat ini berfungsi adalah untuk menyadari hal itu charCode, keyCodedan semuanyawhich merupakan metode yang sudah ketinggalan zaman . Karena itu jika mengolah kode acara tekan tombol menggunakan salah satu dari ketiganya, maka itu akan menerima jawaban palsu (misalnya default 0).

Selama Anda mengakses acara pers kunci dengan metode yang tidak usang, seperti key, Anda harus OK.

Untuk penyelesaian, saya telah menambahkan kode Javascript dasar untuk memicu acara:

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

0

Saya ingin mensimulasikan pers 'Tab' ... Memperluas jawaban Trevor, kita dapat melihat bahwa tombol khusus seperti 'tab' memang ditekan tetapi kami tidak melihat hasil aktual yang dimiliki pers 'tab'. .

mencoba mengirimkan acara-acara ini untuk 'activeElement' serta objek dokumen global keduanya - kode untuk keduanya yang ditambahkan di bawah ini;

potongan bawah ini:

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.